uni-app picker组件多次点击显示空白

uni-app picker组件多次点击显示空白

操作步骤：

  • 多次点击picker组件

预期结果：

  • 尽快

实际结果：

  • 尽快

bug描述：

  • picker组件 属性mode = selector时，显示遮罩层，但下拉框闪退 不显示

图片

image image

项目信息

项目信息 值
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows 10
HBuilderX类型 正式
HBuilderX版本 3.1.6
手机系统 iOS
手机系统版本 IOS 14
手机厂商 苹果
手机机型 iphone 7
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app picker组件多次点击显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

由于你的描述不太清晰（只说尽快尽快…）无法定位具体问题，可以参考下：https://ask.dcloud.net.cn/question/119591 看是否是同一种情况

更多关于uni-app picker组件多次点击显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app picker组件在iOS设备上的兼容性问题。当mode设置为selector时，快速多次点击会触发底层渲染冲突，导致下拉框闪退不显示。

问题原因： iOS系统对WebView中原生组件与CSS动画的渲染处理存在差异，快速连续点击会打断picker的渲染流程，造成遮罩层显示但内容区域空白。

解决方案：

  1. 添加防抖控制：在@click事件中设置300ms的防抖间隔
let timer = null
onPickerClick() {
  clearTimeout(timer)
  timer = setTimeout(() => {
    this.$refs.picker.show()
  }, 300)
}
  1. 使用条件渲染：在picker外层添加v-if控制
<picker v-if="showPicker" mode="selector" :range="array" [@change](/user/change)="onChange">
  <view>点击选择</view>
</picker>
回到顶部