uni-app picker时间选择器在HarmonyOS Next真机上选择时无法选定，滑动停止后自动跳回当天日期

uni-app picker时间选择器在HarmonyOS Next真机上选择时无法选定，滑动停止后自动跳回当天日期

操作步骤：

  • 真机上，在选择的时候，不能选择，当我滑动停止的时候，都会跳到当天日期

预期结果：

  • 真机上，在选择的时候，当我滑动停止的时候，应该是我滑动到的当前日期选项，而不是跳到当天的日期选项

实际结果：

  • 真机上，在选择的时候，不能选择，当我滑动停止的时候，都跳到当天日期

bug描述：

  • 官方文档说是能兼容，但是在真机上，在选择的时候，不能选择，当我滑动停止的时候，都跳到当天日期

附件

视频.zip

信息项 内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows10 专业版
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 全部
手机机型 HUEWEI Mate 60 pro
页面类型 vue
vue版本 vue2
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app picker时间选择器在HarmonyOS Next真机上选择时无法选定，滑动停止后自动跳回当天日期的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app picker时间选择器在HarmonyOS Next真机上选择时无法选定，滑动停止后自动跳回当天日期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对您提到的uni-app中picker时间选择器在HarmonyOS Next真机上选择时无法选定，滑动停止后自动跳回当天日期的问题，这通常与picker组件的事件处理或系统兼容性有关。以下是一个示例代码，展示了如何使用uni-app的picker组件，并包含一些可能的解决方法来处理此类问题。请注意，由于我无法直接测试HarmonyOS环境，这些代码主要是基于常见的picker使用方式和可能的修复策略。

示例代码

<template>
  <view>
    <button @click="showPicker">选择日期</button>
    <view v-if="selectedDate">选定日期: {{ selectedDate }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      pickerOptions: {
        type: 'date',
        start: '2020-01-01',
        end: '2030-12-31'
      }
    };
  },
  methods: {
    showPicker() {
      uni.showActionSheet({
        itemList: ['选择日期'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.picker({
              mode: 'date',
              range: this.getDateRange(),
              value: this.formatDate(new Date()),
              success: (result) => {
                this.selectedDate = this.formatDate(new Date(result.value));
                // 尝试手动触发setData更新视图，防止自动回跳
                this.$forceUpdate();
              },
              fail: (err) => {
                console.error('picker失败:', err);
              }
            });
          }
        }
      });
    },
    getDateRange() {
      const start = new Date(this.pickerOptions.start).getTime();
      const end = new Date(this.pickerOptions.end).getTime();
      const currentDate = new Date().getTime();
      const range = [];
      let time = start;
      while (time <= end) {
        range.push(this.formatDate(new Date(time)));
        time = time + 24 * 60 * 60 * 1000;
      }
      return range;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

说明

  1. picker配置：设置了type为date，并指定了开始和结束日期。
  2. 日期范围生成：getDateRange方法生成一个日期数组，用于picker的range属性。
  3. 日期格式化：formatDate方法用于格式化日期字符串。
  4. 强制更新视图：在picker成功回调中，尝试使用this.$forceUpdate()强制Vue组件重新渲染，以防系统级的bug导致视图未正确更新。

由于问题可能与HarmonyOS系统的特定行为有关，如果上述方法无效，建议检查uni-app和HarmonyOS的兼容性文档或寻求官方支持。

回到顶部