uni-app中调试app picker组件有很大概率只显示蒙版而没有显示选择器

uni-app中调试app picker组件有很大概率只显示蒙版而没有显示选择器

开发环境 版本号 项目创建方式
Windows dell 5577 CLI

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphone 7plus

页面类型：nvue

打包方式：云端

CLI版本号：~4.5.0

示例代码：

<picker mode="selector" :range="people_typeList" range-key="name" @change="changeScreenPeople_type">  
    <div class="picker_style"  
        style="width: 400rpx;height: 100rpx;flex-direction: row;justify-content: flex-end;text-align: center;align-items: center;">  
        <text style="font-size: 30rpx;">{{people_type.name?people_type.name:''}}</text>  
    </div>  
</picker>

更多关于uni-app中调试app picker组件有很大概率只显示蒙版而没有显示选择器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是否同这个问题，相关链接https://ask.dcloud.net.cn/question/119591

更多关于uni-app中调试app picker组件有很大概率只显示蒙版而没有显示选择器的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在iOS设备上常见的兼容性问题，特别是在nvue页面中使用picker组件时。主要原因可能是：

  1. iOS版本兼容性：iOS 14对Web组件渲染有更严格的限制
  2. nvue渲染差异：nvue使用原生渲染，与vue页面行为不一致
  3. 样式冲突：自定义样式可能干扰了picker的原生渲染

解决方案：

  1. 检查样式层级：移除picker内部div的复杂样式，简化结构：
<picker mode="selector" :range="people_typeList" range-key="name" [@change](/user/change)="changeScreenPeople_type">
    <view class="picker_style">
        <text>{{people_type.name || ''}}</text>
    </view>
</picker>

  1. 使用标准布局：避免在picker内部使用flex-direction等复杂布局

  2. 测试基础picker：先使用最简单的picker代码排除样式干扰：

<picker mode="selector" :range="people_typeList" [@change](/user/change)="changeScreenPeople_type">
    <view>选择</view>
</picker>
回到顶部