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渲染机制的原因,可能导致选择器内容层未能正确显示。
解决方案:
- 临时修复方案:在picker组件上添加
:key属性强制重新渲染
<picker :key="pickerKey" :value="index" :range="array">
在data中定义pickerKey,并在每次关闭picker时更新:
data() {
return {
pickerKey: Date.now()
}
},
methods: {
onPickerHide() {
this.pickerKey = Date.now()
}
}

