uni-app 鸿蒙系统双指长按识别后 picker-view 基础组件无法滚动

uni-app 鸿蒙系统双指长按识别后 picker-view 基础组件无法滚动

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS Sonoma 14.6.1
HBuilderX类型 正式
HBuilderX版本号 4.24
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机:

harmonyOS 4.2.0.136

操作步骤:

  • 鸿蒙系统,双指长按,识别,关闭识别蒙层,再次滑动picker,无法进行滑动

预期结果:

  • 鸿蒙系统,双指长按,识别,关闭识别蒙层,可以进行正常的滑动选择

实际结果:

  • 无法滑动选择

bug描述:

  • 鸿蒙系统,双指长按识别,识别后,picker-view 基础组件无法滚动

1238_1725246148.mp4_.zip


更多关于uni-app 鸿蒙系统双指长按识别后 picker-view 基础组件无法滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你这种情况是只有picer-view不能点,其它位置可以点吗?

更多关于uni-app 鸿蒙系统双指长按识别后 picker-view 基础组件无法滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以的,点击事件没有问题,只有滚动事件会有问题。看了源码,使用的是onWheel 滚轮事件,不知是否Wheel 事件被识别的时候重置了

回复 m***@gmail.com: 暂时不清楚这个的影响

回复 DCloud_UNI_yuhe: 官方可以试着复现下

在处理uni-app在鸿蒙系统上双指长按识别后picker-view基础组件无法滚动的问题时,我们首先需要明确问题发生的上下文和可能的解决方案。由于这个问题涉及到特定平台(鸿蒙系统)和特定手势(双指长按),解决起来可能较为复杂。不过,我们可以尝试通过一些编程技巧来绕过这个问题,或者确保在特定手势下组件的行为符合预期。

以下是一个基本的示例代码,展示了如何在uni-app中使用picker-view组件,并尝试处理可能的手势冲突。请注意,由于鸿蒙系统的特殊性,以下代码可能需要根据实际情况进行调整。

<template>
  <view class="container">
    <picker-view :value="pickerValue" @change="onPickerChange">
      <picker-view-column>
        <view v-for="item in columns[0]" :key="item">{{ item }}</view>
      </picker-view-column>
      <!-- 根据需要添加更多列 -->
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerValue: [0], // 初始选中的值
      columns: [
        ['选项1', '选项2', '选项3', '选项4'] // 选项数据
        // 根据需要添加更多列数据
      ]
    };
  },
  methods: {
    onPickerChange(e) {
      this.pickerValue = e.detail.value;
      console.log('选中的值:', this.pickerValue);
    }
  },
  mounted() {
    // 尝试监听触摸事件来处理双指长按
    const handleTouch = (e) => {
      if (e.touches.length === 2 && e.type === 'touchstart') {
        // 双指长按处理逻辑,这里可以阻止默认行为或者进行其他处理
        // 例如,重置picker-view的滚动状态,或者暂时禁用滚动
        console.log('双指长按识别');
        // 可能的解决方案:重置picker-view的滚动位置
        // this.pickerValue = [初始位置]; // 根据需要设置
      }
    };
    // 注意:这里直接监听document可能不适用于所有情况,需要根据实际情况调整选择器
    document.addEventListener('touchstart', handleTouch);
    document.addEventListener('touchmove', handleTouch);
    document.addEventListener('touchend', handleTouch);
  },
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener('touchstart', this.handleTouch);
    document.removeEventListener('touchmove', this.handleTouch);
    document.removeEventListener('touchend', this.handleTouch);
  }
};
</script>

在上述代码中,我们尝试通过监听全局的触摸事件来识别双指长按手势,并在识别到该手势时执行特定的处理逻辑。然而,由于鸿蒙系统的差异性和手势识别的复杂性,这种方法可能无法完全解决问题。在实际应用中,可能还需要结合鸿蒙系统的特定API或事件机制来进行更深入的优化和处理。

回到顶部