uni-app 鸿蒙下picker-view的@change事件不触发

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

uni-app 鸿蒙下picker-view的@change事件不触发

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<picker-view :indicator-style="indicatorStyle" :value="selectedValue" [@change](/user/change)="wrapperChange">
<picker-view-column :style="pvcStyle">
<view class="g-dp-ctt-wp-item" v-for="(item,index) in years" :key="index">{{item}}年
</view>
</picker-view-column>
<picker-view-column :style="pvcStyle">
<view class="g-dp-ctt-wp-item" v-for="(item,index) in months" :key="index">
{{dateFormate(item)}}月</view>
</picker-view-column>
<picker-view-column :style="pvcStyle">
<view class="g-dp-ctt-wp-item" v-for="(item,index) in days" :key="index">
{{dateFormate(item)}}日</view>
</picker-view-column>
</picker-view>

操作步骤：

wrapperChange(e) {
console.log('cucucucuc',JSON.stringify(e))
//到这一步打印不出e的内容
}

预期结果：

希望能获取到选中的值

实际结果：

获取不到选中的值

bug描述：

使用picker-view时无法触发[@change](/user/change)获取到选中的值

更多关于uni-app 鸿蒙下picker-view的@change事件不触发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于uni-app 鸿蒙下picker-view的@change事件不触发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，如果你发现picker-view组件在鸿蒙系统下@change事件不触发，可能是由于多种原因导致的，包括事件绑定问题、组件内部逻辑错误或者系统兼容性问题。以下是一个基本的picker-view使用示例，并附带一些可能帮助你诊断问题的代码片段。

基本picker-view示例

首先，确保你的picker-view组件基本使用是正确的。以下是一个简单的picker-view示例：

<template>
  <view>
    <picker-view :value="pickerValue" [@change](/user/change)="onPickerChange">
      <picker-view-column>
        <view v-for="(item, index) in columns[0]" :key="index">{{ item }}</view>
      </picker-view-column>
      <picker-view-column>
        <view v-for="(item, index) in columns[1]" :key="index">{{ item }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerValue: [0, 0], // 初始选中值
      columns: [
        ['选项1', '选项2', '选项3'],
        ['子选项1-1', '子选项1-2', '子选项2-1', '子选项2-2', '子选项3-1', '子选项3-2']
      ]
    };
  },
  methods: {
    onPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      this.pickerValue = e.detail.value;
    }
  }
};
</script>

排查问题

  1. 检查事件绑定： 确保[@change](/user/change)事件已经正确绑定到picker-view组件。

  2. 控制台输出： 在onPickerChange方法中添加console.log语句，检查该方法是否被调用。如果未被调用，可能是事件未被正确触发。

  3. 组件内部逻辑： 检查picker-view组件内部是否有逻辑错误，导致事件无法触发。

  4. 系统兼容性： 由于是在鸿蒙系统下出现问题，考虑是否是系统兼容性问题。可以尝试在其他系统（如Android、iOS）上测试同一代码，看是否能正常触发事件。

  5. uni-app版本： 确保你使用的uni-app版本是最新的，或者至少是一个已知稳定的版本。有时候，框架本身的bug也会导致组件行为异常。

如果以上步骤都不能解决问题，建议向uni-app社区或者华为鸿蒙开发者论坛寻求帮助，可能有其他开发者遇到并解决了相同的问题。

回到顶部