uni-app picker组件底部弹出显示异常，有时正常显示，有时显示空白

uni-app picker组件底部弹出显示异常，有时正常显示，有时显示空白

开发环境 版本号 项目创建方式
Windows 最新 HBuilderX 
### 操作步骤：

```html
<pickerview [@change](/user/change)="bindPickerChange"  :range="array">
<view class="pickBtn">{{array[Cindex]}}</view>
</pickerview>  

array   : ['全部', '收入', '支出'],
Cindex  : 0；

picker组件 有时候能弹出选项列表，有时候就不显示

预期结果：

<pickerview [@change](/user/change)="bindPickerChange"  :range="array">
<view class="pickBtn">{{array[Cindex]}}</view>
</pickerview>  

array   : ['全部', '收入', '支出'],
Cindex  : 0；

picker组件 有时候能弹出选项列表，有时候就不显示

实际结果：

<pickerview [@change](/user/change)="bindPickerChange"  :range="array">
<view class="pickBtn">{{array[Cindex]}}</view>
</pickerview>  

array   : ['全部', '收入', '支出'],
Cindex  : 0；

picker组件 有时候能弹出选项列表，有时候就不显示

bug描述：

<pickerview [@change](/user/change)="bindPickerChange"  :range="array">
<view class="pickBtn">{{array[Cindex]}}</view>
</pickerview>  

array   : ['全部', '收入', '支出'],
Cindex  : 0；

picker组件 有时候能弹出选项列表，有时候就不显示


更多关于uni-app picker组件底部弹出显示异常，有时正常显示，有时显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我用官方的hello模板，手机真机运行是可以的，
但是自己创建的新项目，最新版本的picker组件，有时候就会弹不出内容，只显示了透明黑底背景，pick选项时有时没有的；
刚刚测试了下，我切回上一个hbuilderx版本就没问题；

更多关于uni-app picker组件底部弹出显示异常，有时正常显示，有时显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题可能是由于picker组件的渲染时机或数据绑定导致的。以下是几个可能的原因和解决方案：

  1. 数据异步加载问题： 确保array数据在组件渲染前已经完成初始化。可以在onLoad生命周期中预先设置默认值：
data() {
  return {
    array: ['全部', '收入', '支出'],
    Cindex: 0
  }
}
  1. 使用v-if替代v-show： 尝试用v-if控制picker的显示/隐藏，避免可能的渲染问题：
<picker v-if="showPicker" [@change](/user/change)="bindPickerChange" :range="array">
  <view class="pickBtn">{{array[Cindex]}}</view>
</picker>

  1. 检查样式冲突： 确保picker的父容器没有设置overflow:hidden等可能影响显示的样式。

  2. 使用官方推荐的picker模式： 如果是H5端，可以尝试使用mode属性：

<picker mode="selector" [@change](/user/change)="bindPickerChange" :range="array">
  <view class="pickBtn">{{array[Cindex]}}</view>
</picker>
回到顶部