uni-app picker 在 ios 系统下普通选择器和多列选择器连续点击后不能正常弹窗

uni-app picker 在 ios 系统下普通选择器和多列选择器连续点击后不能正常弹窗

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10专业版1909
HBuilderX类型 正式
HBuilderX版本 3.1.4
手机系统 iOS
手机系统版本 IOS 14
手机厂商 苹果
手机机型 iphone8
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<template>  
    <view>  
        <page-head :title="title"></page-head>  
        <view class="uni-title uni-common-pl">普通选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker :value="index" :range="array" range-key="name">  
                        <view class="uni-input">{{array[index].name}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  

        <!-- #ifndef MP-ALIPAY -->  
        <view class="uni-title uni-common-pl">多列选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">  
                        <view class="uni-input">{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
        <!-- #endif -->  
    </view>  
</template>  

<script>  

    export default {  
        data() {  
            return {  
                title: 'picker',  
                array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],  
                index: 0,  
                multiArray: [  
                    ['亚洲', '欧洲'],  
                    ['中国', '日本'],  
                    ['北京', '上海', '广州']  
                ],  
                multiIndex: [0, 0, 0],  
            }  
        },  
        methods: {  
            bindPickerChange: function(e) {  
                console.log('picker发送选择改变,携带值为:' + e.detail.value)  
                this.index = e.detail.value  
            },  
            bindMultiPickerColumnChange: function(e) {  
                console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)  
                this.multiIndex[e.detail.column] = e.detail.value  
                switch (e.detail.column) {  
                    case 0: //拖动第1列  
                        switch (this.multiIndex[0]) {  
                            case 0:  
                                this.multiArray[1] = ['中国', '日本']  
                                this.multiArray[2] = ['北京', '上海', '广州']  
                                break  
                            case 1:  
                                this.multiArray[1] = ['英国', '法国']  
                                this.multiArray[2] = ['伦敦', '曼彻斯特']  
                                break  
                        }  
                        this.multiIndex.splice(1, 1, 0)  
                        this.multiIndex.splice(2, 1, 0)  
                        break  
                    case 1: //拖动第2列  
                        switch (this.multiIndex[0]) { //判断第一列是什么  
                            case 0:  
                                switch (this.multiIndex[1]) {  
                                    case 0:  
                                        this.multiArray[2] = ['北京', '上海', '广州']  
                                        break  
                                    case 1:  
                                        this.multiArray[2] = ['东京','北海道']  
                                        break  
                                }  
                                break  
                            case 1:  
                                switch (this.multiIndex[1]) {  
                                    case 0:  
                                        this.multiArray[2] = ['伦敦', '曼彻斯特']  
                                        break  
                                    case 1:  
                                        this.multiArray[2] = ['巴黎', '马赛']  
                                        break  
                                }  
                                break  
                        }  
                        this.multiIndex.splice(2, 1, 0)  
                        break  
                }  
                this.$forceUpdate()  
            },  

        }  
    }  
</script>  

<style>  
.uni-picker-tips {  
    font-size: 12px;  
    color: #666;  
    margin-bottom: 15px;  
    padding: 0 15px;  
}  
</style>  

操作步骤:

  • 连续点击普通选择器或多列选择器,点开后,点空白处关闭,再点击,重复2-4次

预期结果:

  • 点击正常显示内容层,进行选择

实际结果:

  • 遮罩层弹出,内容层不显示,或内容层显示后快速关闭,遮罩层仍保留,需要再点击一次关闭遮罩层

bug描述:

picker 在 ios 系统下普通选择器和多列选择器,连续点击2-3次,只弹出遮罩层,不弹内容层,或内容层出现后立即关闭,遮罩层仍显示;时间选择器和日期选择器没问题

示例图片


更多关于uni-app picker 在 ios 系统下普通选择器和多列选择器连续点击后不能正常弹窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

测试hello-uniapp是否有同样的问题?

更多关于uni-app picker 在 ios 系统下普通选择器和多列选择器连续点击后不能正常弹窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我测试了,hello-uniapp也是一样的问题

发现同样的问题ios14+

ios 14.4 也有这个情况 6s 5s 6 7 都可以正常显示在8 或者以上 x 以上都会又这个情况

这是系统问题嘛

这是一个已知的iOS平台下picker组件的渲染问题。在iOS 14系统上,连续快速点击picker时,由于WebView渲染机制的原因,可能导致选择器内容层未能正确显示。

解决方案:

  1. 临时修复方案:在picker组件上添加:key属性强制重新渲染
<picker :key="pickerKey" :value="index" :range="array">

在data中定义pickerKey,并在每次关闭picker时更新:

data() {
  return {
    pickerKey: Date.now()
  }
},
methods: {
  onPickerHide() {
    this.pickerKey = Date.now()
  }
}
回到顶部