独辟蹊径，洞察快应用 Tabs 和 Video 组件滑动事件优先级错位的关键

2023-12-05 06:52:05

概览

当快应用的 Tabs 组件嵌套 Video 组件时，可能会遇到这样一个问题：左右滑动 Tabs 组件时，有时会意外地拖动 Video 组件的进度条，而不是切换 Tabs 内容。这背后的原因与组件的滑动事件优先级有关。本文将深入探讨此问题，并提供明确的解决方案。

Tabs 和 Video 组件的滑动事件机制

Tabs 组件和 Video 组件都自带滑动事件处理能力。当用户在这些组件上滑动手指时，相应的事件侦听器会被触发。

Tabs 组件： 当用户在 Tabs 组件上左右滑动时，touchmove 事件被触发，然后触发 swipe 事件。
Video 组件： 当用户在 Video 组件上左右滑动时，touchmove 事件被触发，然后触发 seeking 事件。

事件优先级错位的原因

当 Tabs 组件嵌套 Video 组件时，问题就出现了。这是因为：

Video 组件位于 Tabs 组件的内部，因此滑动事件首先会到达 Video 组件。
Video 组件的 seeking 事件的优先级高于 Tabs 组件的 swipe 事件。这意味着当滑动发生在 Video 组件区域时，Video 组件的 seeking 事件会被优先触发，导致拖动进度条，而不是切换 Tabs 内容。

解决方案

解决此问题的关键是调整滑动事件的优先级，确保 Tabs 组件的 swipe 事件具有更高的优先级。可以通过以下方法实现：

使用事件捕获： 在 Tabs 组件上使用 event.capture 将 touchmove 事件捕获到父元素。这将使 Tabs 组件的 touchmove 事件在 Video 组件的 touchmove 事件之前被触发。
阻止事件冒泡： 在 Video 组件上使用 event.stopPropagation() 阻止 touchmove 事件冒泡到父元素。这将防止 Video 组件的 touchmove 事件触发 Tabs 组件的 touchmove 事件。

代码示例

// Tabs 组件
<div class="tabs" @touchmove.capture="handleTouchMove">
  <!-- Tabs 内容 -->
</div>

// Video 组件
<video @touchmove.stop="handleTouchMove">
  <!-- Video 内容 -->
</video>