uni-app HbuilderX4.32-alpha版本动态获取picker数据无法触发下拉弹框 4.29版本正常

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app HbuilderX4.32-alpha版本动态获取picker数据无法触发下拉弹框 4.29版本正常

开发环境 版本号 项目创建方式
Windows 11 HBuilderX
产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:4.32

手机系统:HarmonyOS NEXT

手机系统版本号:HarmonyOS NEXT Developer Beta2

手机厂商:华为

手机机型:mate60

页面类型:vue

vue版本:vue3

打包方式:云端

项目创建方式:HBuilderX

示例代码:

```swift
<picker  
class="flex-1"  
mode="selector"  
:range="termList"  
:range-key="'nameShow'"  
:value="termIndex"  
[@change](/user/change)="selectTerm">  
    <text class="term-txt fz-16">{{termList[termIndex] && termList[termIndex].nameShow}}</text>  
    <text class="iconfont iconyouce term-icon"></text>  
</picker>

操作步骤: HbuilderX4.32-alpha, 动态获取picker数据,无法触发下拉弹框, 4,29是正常的

预期结果: 正常触发picker

实际结果: 无法触发选择弹框

bug描述: HbuilderX4.32-alpha, 动态获取picker数据,无法触发下拉弹框, 4,29是正常的


11 回复

什么是动态获取 picker 数据?我看你只写 picker 的写法,具体什么问题,提供个单页面源码吧


数据termList,是根据后台接口返回的,但是我给每个picker都加了动态生成的key值,就可以触发了

回复 8***@qq.com: 能给我一个复现工程吗?或者你描述一下怎么交动态获取 picker 数据,触发下拉框?我测试一下

回复 DCloud_UNI_OttoJi: 上面的代码中 termList 是通过接口获取的,

如果termList是直接写死的,是能触发的

回复 啾啾: 能给我一个复现工程吗?我看你只写 picker 的写法

回复 DCloud_UNI_OttoJi: getTermList() { return new Promise((resolve) => { classroom.getGradeList({ tag: 1, }).then(res => { this.termList = res || []; this.termList.forEach((item, index) => { if (item.now) { this.termIndex = index; } }) resolve(); }) }) },

这是获取termList的接口

解决了吗,同样的问题

提供复现工程,别给零碎的代码,单页面源码也可以

针对您提到的uni-app在HBuilderX 4.32-alpha版本中动态获取picker数据无法触发下拉弹框的问题,而4.29版本正常,这里提供一个可能的代码案例和调试思路。由于问题可能与版本更新引入的bug或行为变更有关,建议首先确认是否是uni-app框架或HBuilderX编辑器本身的已知问题。同时,可以尝试以下代码示例和调试方法:

代码示例

以下是一个简单的uni-app中使用picker组件的示例,展示如何动态设置picker的数据并触发下拉弹框:

<template>
  <view>
    <button @click="showPicker">选择日期</button>
    <picker mode="date" :range="dateRange" @change="bindDateChange">
      <view class="picker">{{selectedDate}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [], // 日期范围数组
      selectedDate: '请选择日期' // 当前选中的日期
    };
  },
  methods: {
    showPicker() {
      // 动态设置日期范围(例如,获取最近30天的日期)
      const endDate = new Date();
      const dateRange = [];
      for (let i = 0; i < 30; i++) {
        const date = new Date(endDate);
        date.setDate(endDate.getDate() - i);
        dateRange.push(date.toLocaleDateString());
      }
      this.dateRange = dateRange;
      // 触发picker显示(注意:这里picker的显示通常由用户交互触发,如点击事件)
      // 在某些情况下,可能需要手动触发显示逻辑,但这通常不是标准做法
      // 正常情况下,用户点击picker区域外的按钮或元素,picker应自动响应
    },
    bindDateChange(e) {
      this.selectedDate = this.dateRange[e.detail.value];
    }
  }
};
</script>

调试思路

  1. 确认版本兼容性:检查uni-app和HBuilderX的更新日志,看是否有关于picker组件的变更或已知问题。
  2. 检查数据绑定:确保dateRange数组在showPicker方法中被正确赋值。
  3. 触发机制:picker的显示通常由用户点击事件触发。确认在4.32-alpha版本中,点击事件是否仍然有效。
  4. 控制台日志:使用console.log输出关键变量的值,检查数据是否在预期时更新。
  5. 简化测试:尝试创建一个最简单的picker示例,看是否问题依旧存在,以排除其他代码干扰。

如果以上方法无法解决问题,建议向uni-app社区或官方支持渠道反馈此问题,提供详细的复现步骤和代码示例。

回到顶部