uni-app uni-popup里的picker-view @change事件无法触发

uni-app uni-popup里的picker-view @change事件无法触发

测试过的手机

Android和iPhoneXR

示例代码：

<template>  
    <view>  
        <uni-popup ref="popupView" type="bottom">  
            <view class="popup-view">  
                <picker-view indicator-style="height: 68rpx;" [@change](/user/change)="bindChange" class="picker-view">  
                    <picker-view-column>  
                        <view class="item" v-for="(item,index) in list" :key="index">{{item.text}}</view>  
                    </picker-view-column>  
                </picker-view>  
            </view>  
        </uni-popup>  
    </view>  
</template>  
<script setup>  
    import { getCurrentInstance, ref } from 'vue';  
    const list = ref([{ text: '男', value: 1 }, { text: '女', value: 2 }]);  
    const { proxy } = getCurrentInstance();  
    defineExpose({ open });  

    function open() {  
        proxy.$refs.popupView.open();  
    }  

    function bindChange(e) {  
        console.log(e.detail.value);  
    }  
</script>  
<style lang="scss" scoped>  
    .popup-view {  
        background-color: #FFFFFF;  

        .popup-view-header {  
            text-align: center;  
            width: 100%;  
            height: 90rpx;  
            background-color: #fff;  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
            border-bottom: 1rpx solid #F5F5F5;  

            view {  
                max-width: 50%;  
                height: 100%;  
                box-sizing: border-box;  
                padding: 0 28rpx;  
                font-size: 30rpx;  
                line-height: 90rpx;  

                &:first-child {  
                    color: #888888;  
                }  

                &:last-child {  
                    color: #007aff;  
                }  
            }  
        }  

        .picker-view {  
            width: 100%;  
            height: 476rpx;  
            margin-top: 20rpx;  

            .item {  
                height: 68rpx !important;  
                line-height: 68rpx;  
                text-align: center;  
                color: #000;  
                text-overflow: ellipsis;  
                white-space: nowrap;  
                overflow: hidden;  
                cursor: pointer;  
            }  
        }  
    }  
</style>

操作步骤：

如上

预期结果：

APP端 uni-popup里的picker-view @change事件可以触发。

实际结果：

无法实现

bug描述：

如题：uni-popup里的picker-view @change事件无法触发。（微信小程序同样的代码就可以） 引子：需求是单击按钮显示从底部弹出的选择器-选择性别。想着很简单，但是… 本来想在官网找一个组件实现单机按钮显示从底部弹出的选择器如picker组件，但是picker是要在页面占位显示的，其它扩展合适需求没有，（这种常见的组件不知道官方为啥没有…）

然后自己想着做个组件，其实思路就是uni-popup+picker-view，最好后，微信小程开发工具测试没有问题，但是再使用手机APP真机测试就出现题目的问题。 废话不说，上组件代码


更多关于uni-app uni-popup里的picker-view @change事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

用你的这个组件测测试 没发现问题 app端和h5都能正常输出@change的值

更多关于uni-app uni-popup里的picker-view @change事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，我的就是在弹出选择选择器后，手动滑动选择男女时，不触发@change，单击男女列表页没有任何反应，不知道为什么，我再看看

回复 守护: 有解决吗？滚动时最后一条无法监听change事件

在 uni-app 中使用 uni-popup 组件时，如果 picker-view 的 @change 事件无法触发，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. picker-view 的层级问题

uni-popup 是一个弹出层组件，可能会影响到 picker-view 的事件触发。确保 picker-view 在 uni-popup 中正确嵌套，并且没有被其他元素遮挡。

<uni-popup ref="popup" type="bottom">
  <picker-view @change="handlePickerChange">
    <!-- picker-view-columns -->
  </picker-view>
</uni-popup>

2. @change 事件绑定问题

确保 @change 事件正确绑定到 picker-view 上，并且事件处理函数 handlePickerChange 在 methods 中正确定义。

methods: {
  handlePickerChange(event) {
    console.log('Picker changed:', event.detail.value);
  }
}

3. picker-view 的数据绑定问题

确保 picker-view 的 value 和 range 数据正确绑定，并且数据是响应式的。

<picker-view :value="pickerValue" :range="pickerRange" @change="handlePickerChange">
  <picker-view-column v-for="(item, index) in pickerRange" :key="index">
    <view>{{ item }}</view>
  </picker-view-column>
</picker-view>

data() {
  return {
    pickerValue: [0],
    pickerRange: ['选项1', '选项2', '选项3']
  };
}

4. uni-popup 的显示与隐藏

确保 uni-popup 在显示时，picker-view 能够正常渲染和交互。有时候，uni-popup 的动画或过渡效果可能会影响到内部组件的事件触发。

this.$refs.popup.open(); // 打开 popup

5. 检查是否有其他事件冲突

确保没有其他事件或代码逻辑干扰了 picker-view 的 @change 事件。例如，检查是否有其他组件或逻辑在 picker-view 上绑定了相同的事件。

6. 使用 @input 事件

如果 @change 事件仍然无法触发，可以尝试使用 @input 事件，看看是否能捕获到用户的交互。

<picker-view @input="handlePickerInput">
  <!-- picker-view-columns -->
</picker-view>

methods: {
  handlePickerInput(event) {
    console.log('Picker input:', event.detail.value);
  }
}

7. 检查 uni-app 版本

确保你使用的 uni-app 版本是最新的，或者至少是比较新的版本，以避免已知的 bug 或问题。

npm update -g @vue/cli @vue/cli-service-global

8. 调试与日志

在 handlePickerChange 方法中添加 console.log 或断点，确保方法被调用。如果方法未被调用，可能需要进一步检查 picker-view 的渲染和事件绑定。

methods: {
  handlePickerChange(event) {
    console.log('Picker changed:', event.detail.value);
  }
}
回到顶部