uni-app picer 在鸿蒙系统中无法显示数据

uni-app picer 在鸿蒙系统中无法显示数据

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows11
HBuilderX类型 正式
HBuilderX版本 4.75
手机系统 HarmonyOS NEXT
手机系统版本 HarmonyOS 6.0.0
手机厂商 华为
手机机型 华为mate X5
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

点击picker弹出谈款但是没有数据

预期结果：

正常显示数据

实际结果：

无数据显示 无法选择

bug描述：

在界面上使用到了 picker

//界面  
<view class="es-layout-flex8 es-flex es-flex-middle es-color-gray" >  
    <picker v-if="nation.length > 0" @change="bindPickerChangeData($event,'nation')" class="es-layout-flex1" :value="nationValue" :range="nation">  
        <view class="es-flex es-flex-middle">  
            <view class="es-color-gray es-layout-flex1 es-text-right">{{nation[nationValue]}}</view>  
            <uni-icons type="qianjin-copy" size="14" class="es-color-gray"></uni-icons>  
        </view>  
    </picker>     
</view>  
//数据  

onload(){  
   let datas = uni.getStorageSync("storage.catch.baseInformation.dictionaries.jf");  
   //民族  
                datas.nation.map(item=>{  
                    this.nation.push(item.fldNationName);  
                });  

}


更多关于uni-app picer 在鸿蒙系统中无法显示数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

该bug反馈内容基本完整，描述了鸿蒙系统下picker组件无数据显示的问题，包含代码片段、复现步骤及环境信息。但存在不足：未提供data定义部分（nation/nationValue声明方式），缺少错误日志或控制台输出信息，且未说明是否尝试过更新HBuilderX版本。
经分析，该问题很可能成立，但属于概念性误区。根据知识库关键信息：

鸿蒙平台与App（安卓/iOS）是分开并立的体系，不支持传统uni-app的app-plus特性
用户使用HBuilderX 4.75（当前主流版本应为4.87+），且采用Vue3的uni-app（非uni-app-x）
知识库明确提示：鸿蒙平台应使用uni-app-x方案，其页面类型是uvue（使用uts语言），而非传统uni-app的vue/nvue

根本原因在于：用户在鸿蒙Next环境错误使用了传统uni-app框架。uni-app-x专为鸿蒙设计，而传统uni-app的picker在鸿蒙平台存在兼容性限制。建议：

升级HBuilderX至最新正式版（当前4.87+）
迁移至uni-app-x框架开发
参考鸿蒙平台适配指南调整代码结构

此问题不属于误报，但需注意鸿蒙平台需特殊处理，不能直接沿用App端开发模式。 内容为 AI 生成，仅供参考

更多关于uni-app picer 在鸿蒙系统中无法显示数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有问反馈过类似的，自己检查数据结构是否完整、类型匹配，这是系统的控件，你可看看 HBuilderX 内置的 hellouniapp 是否正常

试了 把HBuilder 升到 4.87就可以了 4.75就不行

回复 易软: 好

这是一个在鸿蒙NEXT系统上uni-app picker组件的数据显示兼容性问题。根据你的代码和描述，问题可能出现在以下几个方面：

  1. 鸿蒙NEXT兼容性问题：HarmonyOS NEXT使用了全新的ArkTS框架，与Android的ART运行时存在差异，可能导致某些uni-app组件的数据绑定机制在鸿蒙上表现异常。

  2. 数据初始化时机问题：你的nation数组是在onload中异步获取并赋值的，但picker组件在初始渲染时可能已经创建，导致数据未及时更新到组件中。

建议尝试以下解决方案：

方案一：确保数据已加载完成再渲染picker

<view class="es-layout-flex8 es-flex es-flex-middle es-color-gray" >  
    <picker v-if="nation.length > 0 && isDataReady" 
            @change="bindPickerChangeData($event,'nation')" 
            class="es-layout-flex1" 
            :value="nationValue" 
            :range="nation">  
        <!-- 内容不变 -->  
    </picker>     
</view>

// 在data中增加状态控制
data() {
  return {
    nation: [],
    nationValue: 0,
    isDataReady: false
  }
},

onLoad(){  
   let datas = uni.getStorageSync("storage.catch.baseInformation.dictionaries.jf");  
   //民族  
   datas.nation.map(item=>{  
       this.nation.push(item.fldNationName);  
   });  
   this.isDataReady = true; // 数据准备好后再显示picker
}

方案二：使用强制刷新

onLoad(){  
   let datas = uni.getStorageSync("storage.catch.baseInformation.dictionaries.jf");  
   //民族  
   datas.nation.map(item=>{  
       this.nation.push(item.fldNationName);  
   });  
   
   // 强制组件更新
   this.$nextTick(() => {
       this.$forceUpdate();
   });
}
回到顶部