守护
守护
  • 发布:2024-05-30 09:55
  • 更新:2024-05-30 10:44
  • 阅读:381

【报Bug】 uni-popup里的picker-view @change事件无法触发

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Win11和MacOS最新版

HBuilderX类型: 正式

HBuilderX版本号: 4.15

手机系统: 全部

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

Android和iPhoneXR

示例代码:
<template>  
    <view>  
        <uni-popup ref="popupView" type="bottom">  
            <view class="popup-view">  
                <picker-view indicator-style="height: 68rpx;" @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真机测试就出现题目的问题。
废话不说,上组件代码

2024-05-30 09:55 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

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

  • 守护 (作者)

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

    2024-05-30 11:12

要回复问题请先登录注册