uni-app IOS14.7版本下，picker下拉框不显示数据

项目	信息
产品分类	uniapp/App
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	Sonoma 14.1.1
HBuilderX类型	正式
HBuilderX版本号	3.8.12
手机系统	iOS
手机系统版本号	iOS 14
手机厂商	苹果
手机机型	iphone12
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<picker  
      range-key="name"  
      :value="current"  
      :range="getOptions"  
      :disabled="disabled || readonly"  
      @change="bindPickerChange"  
    >  
      <view class="input-value u-justify-end">  
        <view :class="{ disabled: disabled, placeholder: selectItem == placeholder }">  
          {{ selectItem }}  
        </view>  
        <uni-icons v-if="!readonly && !disabled" type="forward" :color="iconColor" size="16" />  
      </view>  
</picker>

操作步骤：

点击组件打开弹窗

预期结果：

正常显示下拉框数据

实际结果：

下拉框空白

bug描述：

iphone12 ios14.7真机环境下，picker下拉框不显示任何数据

gougou168 1楼•5 天前

getOptions 是一个方法吗? 如果是方法 getOptions() 这么写试试, 且方法要return数据

h691938207 2楼•5 天前

是一个获取字典数据的computed

yibo5220 3楼•5 天前

我这边测试可以正常显示数据，请提供一下完整工程（包含getOptions）

bupafengyu 4楼•5 天前

这个组件在ios15以上的版本中都没有问题，且在安卓系统中也没有问题，这个问题第一次发现是在ios14.6版本上

itying888 5楼•5 天前

以下是改组件的相关部分代码

zlyuanteng 6楼•5 天前

回复 Scrooge: 将getOption替换为普通的模拟数据（而不是通过store.getters）在ios14.6下可以正常使用吗

gougou168 7楼•5 天前

回复 HRK_01: 回复 HRK_01: 我写死了模拟数据进行测试，结果还是不显示。

yuanlaile 8楼•5 天前

在低版本的ios下有没有可能是样式导致了不显示的问题呢?

yuanlaile 9楼•5 天前

回复 Scrooge: 在ios13都能正常显示，应该是你数据绑定的方式不太对，能否提供一下，简单的demo（用zip压缩包附件形式上传）

itying888 10楼•5 天前

回复 HRK_01: 昨天整体测试了一下，其余页面的picker在ios14下均正常，只有这个页面的picker不显示，这个页面里有个封装的popup组件，当我注释掉这个组件之后，picker就能正常的显示了。

yuanlaile 11楼•5 天前

以下是当前页面引用SharePopup部分的代码：

yibo5220 12楼•5 天前

以下是SharePopup组件部分代码:

yuanlaile 13楼•5 天前

现在问题就被定位到uni-popup组件在ios14下是否会与picker冲突呢

gougou168 14楼•5 天前

在 uni-app 中，picker 组件在某些 iOS 版本（如 iOS 14.7）下可能会出现下拉框不显示数据的问题。这通常是由于 iOS 系统本身的兼容性问题或 uni-app 框架的某些限制导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 `picker` 组件的基本用法

确保 picker 组件的使用方式正确，range 数据源不为空，并且 value 值与 range 数据源匹配。

<picker mode="selector" :range="options" @change="onPickerChange">
  <view>{{ options[selectedIndex] }}</view>
</picker>

export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedIndex: 0,
    };
  },
  methods: {
    onPickerChange(e) {
      this.selectedIndex = e.detail.value;
    },
  },
};

2. 检查样式问题

确保 picker 组件的父容器没有设置 overflow: hidden 或其他可能影响下拉框显示的样式。可以尝试为 picker 组件添加以下样式：

picker {
  display: block;
  width: 100%;
  height: 40px;
}

3. 升级 `uni-app` 版本

确保使用的是最新版本的 uni-app 框架。旧版本可能存在兼容性问题，升级到最新版本可能会解决该问题。

4. 使用 `uni-popup` 替代

如果 picker 组件在 iOS 14.7 下仍然无法正常显示，可以尝试使用 uni-popup 组件自定义一个弹窗选择器。

<uni-popup ref="popup" type="bottom">
  <view class="picker-container">
    <picker mode="selector" :range="options" @change="onPickerChange">
      <view>{{ options[selectedIndex] }}</view>
    </picker>
  </view>
</uni-popup>
<button @click="openPicker">打开选择器</button>

export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedIndex: 0,
    };
  },
  methods: {
    openPicker() {
      this.$refs.popup.open();
    },
    onPickerChange(e) {
      this.selectedIndex = e.detail.value;
      this.$refs.popup.close();
    },
  },
};