uni-app ios touchmove事件触发延迟问题

uni-app ios touchmove事件触发延迟问题

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

操作步骤：

  • 分别运行安卓，滑动屏幕，查看控制台打印结果

预期结果：

  • 事件执行应该同android效果一样即时

实际结果：

  • ios设备出现物理层面的滑动结束，然后控制台依然会段落打印移动事件，存在1s以上的延迟

bug描述：

  • touchmove事件执行存在延迟，同比安卓更加丝滑。延迟甚至超过1s。在正式项目中touchmove事件触发三次后不再触发，android一切正常

xiaocx.rar


更多关于uni-app ios touchmove事件触发延迟问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios touchmove事件触发延迟问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发中，iOS 设备上 touchmove 事件触发延迟的问题通常与 iOS 系统的默认行为有关。iOS 为了优化滚动性能，会延迟处理 touchmove 事件，直到用户的手指停止移动或移动速度减慢。这种延迟在某些场景下可能会导致用户体验不佳。

以下是一些可能的解决方案和优化建议：

1. 使用 @touchmove 和 @touchend

确保你在 touchmove 和 touchend 事件中正确处理逻辑。touchend 事件可以用于处理手指离开屏幕时的逻辑。

<template>
  <view @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <!-- 内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      console.log("Touch move:", event);
    },
    handleTouchEnd(event) {
      console.log("Touch end:", event);
    },
  },
};
</script>

2. 禁用默认滚动行为

如果不需要默认的滚动行为，可以通过 event.preventDefault() 禁用默认行为，这样可以减少 iOS 的延迟。

handleTouchMove(event) {
  event.preventDefault(); // 禁用默认滚动行为
  console.log("Touch move:", event);
}

3. 使用 @touchstart 提前绑定事件

在 touchstart 事件中提前绑定 touchmove 和 touchend 事件，可以减少事件触发的延迟。

<template>
  <view @touchstart="handleTouchStart">
    <!-- 内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      console.log("Touch start:", event);

      const element = event.currentTarget;
      element.addEventListener("touchmove", this.handleTouchMove, { passive: false });
      element.addEventListener("touchend", this.handleTouchEnd);
    },
    handleTouchMove(event) {
      event.preventDefault(); // 禁用默认滚动行为
      console.log("Touch move:", event);
    },
    handleTouchEnd(event) {
      console.log("Touch end:", event);

      const element = event.currentTarget;
      element.removeEventListener("touchmove", this.handleTouchMove);
      element.removeEventListener("touchend", this.handleTouchEnd);
    },
  },
};
</script>

4. 使用 CSS 优化

在某些情况下，通过 CSS 优化可以减少 iOS 的延迟。例如，为需要监听 touchmove 的元素添加以下样式：

.element {
  touch-action: none; /* 禁用默认触摸行为 */
  overflow: hidden; /* 禁用滚动 */
}

5. 使用 uni-app 提供的 API

uni-app 提供了一些原生 API 来处理触摸事件，例如 uni.createSelectorQuery() 或 uni.onTouchMove()，可以尝试使用这些 API 来优化性能。

6. 使用原生插件

如果问题依然无法解决，可以考虑使用原生插件（如 cordova 或 capacitor）来处理触摸事件，这样可以绕过 iOS 的默认行为。

7. 测试和调试

在 iOS 设备上测试时，确保使用真机调试，因为模拟器可能无法完全还原真实设备的行为。可以使用 Safari 的开发者工具来调试 touchmove 事件。

8. 减少事件处理逻辑的复杂度

如果 touchmove 事件处理逻辑过于复杂，可能会导致延迟。可以尝试优化逻辑，或者使用 requestAnimationFrame 来减少性能开销。

handleTouchMove(event) {
  requestAnimationFrame(() => {
    // 处理逻辑
    console.log("Touch move:", event);
  });
}
回到顶部