uni-app picker组件遇到的问题

uni-app picker组件遇到的问题

使用picker组件时，网页使用正常，在苹果手机上调试时出现，点击后未弹出选择框，有时候弹出框闪了一下就消失了，多次点击后才能显示选择框，因为文字不好描述，具体问题可以看下方视频附件，求大神们帮忙看下是什么问题

```template`

<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<picker mode="selector" :range="array" [@change](/user/change)="bindPickerChange" :value="index" range-key="name">
<view>{{array[index].name}}</view>
</picker>  
</view>  
</view>

```script`

export default {
data() {
return {
title: 'Hello',
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
index: 0
}
},
onLoad() {  
},
methods: {  
bindPickerChange: function(e) {  
this.index = e.detail.value  
}  

}
}

```style`

.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {  
height: 200rpx;  
width: 200rpx;  
margin-top: 200rpx;  
margin-left: auto;  
margin-right: auto;  
margin-bottom: 50rpx;  
}

.text-area {  
display: flex;  
justify-content: center;  
}

.title {  
font-size: 36rpx;  
color: #8f8f94;  
}

_picker.rar

开发环境 版本号 项目创建方式
HBuilderX 1.8.10 使用Vue模板创建

更多关于uni-app picker组件遇到的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

看起来的确表现有点怪异 HBuilderX 版本是多少？ 直接使用 hello uni-app 里的示例测试是否正常？

更多关于uni-app picker组件遇到的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


原来是个BUG，更新了HBuilderX现在解决了，谢谢

回复 4***@qq.com: 恩，3.1.7 有相关修复

这是一个在iOS设备上常见的picker组件交互问题，主要与uni-app在iOS平台的事件处理机制有关。以下是几个关键原因和解决方案：

  1. 事件冒泡冲突：iOS对touch事件的处理较为严格，picker的弹出可能会被父级元素的点击事件干扰。建议在picker外层添加@touchstart.stop修饰符阻止事件冒泡：
<view @touchstart.stop>
  <picker mode="selector" :range="array" @change="bindPickerChange" :value="index" range-key="name">
    <view>{{array[index].name}}</view>
  </picker>
</view>
  1. 异步渲染问题：iOS设备上组件渲染可能存在时序问题。可以尝试使用nextTick确保DOM更新完成：
methods: {
  async showPicker() {
    await this.$nextTick();
    // 触发picker显示的逻辑
  }
}
回到顶部