1322323
1322323
  • 发布:2024-09-16 11:15
  • 更新:2024-09-24 13:38
  • 阅读:99

【报Bug】picker-view 中的@pickend,@pickstart,immediate-change希望可以做到全端支持

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.27

手机系统: Android

手机系统版本号: Android 15

手机厂商: 华为

手机机型: 16161616161

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: z

示例代码:
<template> <uni-popup ref="popupRef" is-mask-click="false" @maskClick="onCancel"
type="bottom"
>
<view class="custom-picker-popup">
<view class="page-header">
<view class="page-header-content-text">{{ title }}</view>
<view class="close-icon" @click="onCancel">
<custom-icon
icon="/static/images/psychological-test/icon-closelist@2x.png"
size="24rpx"
/>
</view>
</view>
<view class="page-content">
<picker-view value="[insideSelectedIndex]" @change="onPickerViewChange"
indicator-style="height: 112rpx"
class="picker-view"
>
<picker-view-column>
<view
class="picker-view-item"
v-for="(item, index) in options" key="index" >
{{ item.label }}
</view>
</picker-view-column>
</picker-view>
</view>
<view class="page-footer">
<button @click="onOk">确定</button>
</view>
</view>
</uni-popup>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const emit = defineEmits([
'update:visible',
'update:selectedValue',
'change',
'ok',
'cancel',
])

const props = defineProps({
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
selectedValue: {
type: [String, Number],
default: 0,
},
options: {
type: Array,
default: () => [],
},
isRow: {
type: Boolean,
default: false,
},
})

const popupRef = ref()

const insideVisible = ref(false)
const insideSelectedIndex = ref(undefined)

const findSelectedIndex = (value) => {
const resIndex = props.options.findIndex((item) => item.value === value)
return resIndex > -1 ? resIndex : 0
}

watch(
[() => props.visible],
([newval]) => {
console.log('props: ', props)
insideVisible.value = newval
},
{ immediate: true }
)
watch([() => insideVisible.value], ([newval]) => {
if (!popupRef.value) return

if (newval) open()
else close()
})
watch(
[() => props.selectedValue],
([newval]) => {
insideSelectedIndex.value = findSelectedIndex(newval)
},
{ immediate: true }
)
watch([() => insideSelectedIndex.value], ([newval]) => {
emit('update:selectedValue', props.options[newval].value)
emit('change', props.options[newval].value)
})

const computedSelectedValue = () => {
const row = props.options[insideSelectedIndex.value]
const res = props.isRow ? row : row?.value
return res
}

const onPickerViewChange = (e) => {
const val = e.detail.value
insideSelectedIndex.value = val[0]
}

const open = () => {
popupRef.value.open()
}
const close = () => {
popupRef.value.close()
}

const onOk = () => {
emit('ok', computedSelectedValue())
}
const onCancel = () => {
emit('cancel')
}
</script>

<style lang="scss" scoped>
.custom-picker-popup {
border-radius: 36rpx 36rpx 0rpx 0rpx;
padding: 28rpx 0 0 0;
background-color: #fff;
.page-header {
position: relative;
margin: 0 34rpx 56rpx;
display: flex;
align-items: center;
.page-header-content-text {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
font-size: 36rpx;
color: #131313;
}
.close-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 34rpx;
display: flex;
}
}
.page-content {
margin-bottom: 26rpx;
height: 508rpx;
.picker-view {
height: 508rpx;
.picker-view-item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
}
}
.page-footer {
margin: 0 32rpx;
padding-bottom: 20rpx;
button {
border: none;
height: 88rpx;
background: linear-gradient(90deg, #957ffe 0%, #bf9be8 100%);
border-radius: 44rpx 44rpx 44rpx 44rpx;
font-size: 32rpx;
color: #ffffff;
}
}
}
</style>

操作步骤:

picker-view 中的@pickend,@pickstart,immediate-change希望可以做到全端支持,当在弹窗中使用这个组件时,由于app端不支持这个属性,拿不到动画开始时的状态,导致弹窗关闭时picker-view的onchange事件没有触发

预期结果:

picker-view 中的@pickend,@pickstart,immediate-change希望可以做到全端支持

实际结果:

picker-view 中的@pickend,@pickstart,immediate-change希望可以做到全端支持,当在弹窗中使用这个组件时,由于app端不支持这个属性,拿不到动画开始时的状态,导致弹窗关闭时picker-view的onchange事件没有触发

bug描述:

picker-view 中的@pickend,@pickstart,immediate-change希望可以做到全端支持,当在弹窗中使用这个组件时,由于app端不支持这个属性,拿不到动画开始时的状态,导致弹窗关闭时picker-view的onchange事件没有触发

2024-09-16 11:15 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

官方的这个组件,就是因为更新不及时问题,我们都自己写了一个picker

要回复问题请先登录注册