鸿蒙系统在运行uni-app picker组件的时候有时候无法唤醒

开发环境信息

项目	信息
产品分类	uniapp/App
PC操作系统	Windows
PC系统版本	windows11
HBuilderX	正式版
HBuilderX版本	4.75
手机系统	HarmonyOS NEXT
手机系统版本	HarmonyOS 5.0.5
手机厂商	华为
手机机型	华为 nova13
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码

<picker @change="clickSource" class="es-layout-flex1" :value="sourceOrder" :range="sourceList">  
    <view class="es-flex es-flex-middle">  
        <view class="es-color-gray es-layout-flex1">{{sourceValue.name}}</view>  
        <uni-icons type="xiajiantou2" size="26" :color="color"></uni-icons>  
    </view>  
</picker>

其中sourceList为通过服务器获取的数据。

操作步骤

进入页面

预期结果

正常弹出

实际结果

无法弹出

bug描述

鸿蒙next版本为 5.1.0.150 SP5
情况为进入页面后 picker的取值为动态的获取，通过服务器获取，获取的方法放在了onLoad中。
有的时候进入页面后点击picker无法唤起弹窗，但有的时候又能唤起弹窗。

App下载地址或H5网址

[华为应用市场易软云](//ask.dcloud.net.cn/华为应用市场易软云)

更多关于鸿蒙系统在运行uni-app picker组件的时候有时候无法唤醒的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

看你视频描述点击有的可以，有的不可以，你的响应选取只是那个下拉箭头吗？
需要具体看你的业务代码。你可以新建个工程移动一部分逻辑到新工程中，提供精简后的复现工程

更多关于鸿蒙系统在运行uni-app picker组件的时候有时候无法唤醒的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

响应选取是整个右边的部分

gougou168 3楼

而且这个不响应不是常态，是时有时没有的

yibo5220 4楼

回复易软: 提供精简后的复现工程，看不出具体问题

bupafengyu 5楼作者

这是一个典型的鸿蒙系统与uni-app组件异步数据加载时序问题。在HarmonyOS NEXT 5.1.0.150 SP5环境下，当picker组件的range数据通过异步请求获取时，可能出现组件初始化完成但数据尚未返回的情况，导致点击无法弹出选择器。

解决方案：

数据加载状态控制

const sourceList = ref([])
const isLoading = ref(false)

onLoad(async () => {
  isLoading.value = true
  try {
    const res = await getSourceList()
    sourceList.value = res.data
  } finally {
    isLoading.value = false
  }
})

添加数据就绪判断

<picker 
  v-if="!isLoading && sourceList.length > 0"
  @change="clickSource" 
  :value="sourceOrder" 
  :range="sourceList">
  <!-- 内容 -->
</picker>
<view v-else>
  加载中...
</view>

使用nextTick确保DOM更新

async onLoad() {
  await getSourceData()
  this.$nextTick(() => {
    // 数据渲染完成后再进行交互
  })
}

添加重试机制

const handlePickerClick = () => {
  if (sourceList.value.length === 0) {
    // 重新获取数据
    loadSourceData()
    return
  }
  // 正常处理picker点击
}