快利用 tabs 和 video 组件滑动事件优先级问题

景象形容：

tabs 子组件 tab-content 内容是 video 组件组成的，左右滑动切换 tabs 内容时，偶然会不切换而是拖动视频进度条。

问题代码如下：

<template>
  <div style="background-color: #00bfff;">
    <tabs index="0" >
      <tab-bar mode="fixed">
      </tab-bar>
      <tab-content>
        <div  style="flex-direction: column;">
          <text style="color: red">1</text>
          <stack class="video" >
            <video class="video1" id="111" 
              src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4">
              </video>
          </stack>
        </div>
 
        <div  style="flex-direction: column;">
          <text style="color: red">2</text>
        </div>
 
        <div style="flex-direction: column;">
          <text style="color: red">3</text>
        </div>
      </tab-content>
    </tabs>
  </div>
</template>

问题剖析：

video 组件是 tabs 的子组件，video 组件和 tabs 组件都是自带滑动能力，此问题关键在于滑动的中央在 video 区域上，依据事件从里层往外层的冒泡机制，零碎会优先解决 video 的滑动，而不是 tabs 的切换，而 video 的滑动成果就是咱们看到的调整了视频播放进度。

解决方案：

在 video 区域上笼罩一层 div（video 父节点 stack 减少子节点 div），留神 div 的高下要小于 video 的高度，保障 video 底部的进度条、播放按钮区域不被遮挡。当在 video 区域滑动时，实际上是在 div 上，因为 div 和 video 是兄弟节点，不会触发 video 的滑动事件，完满解决了以上问题。

实现代码如下（见红色局部）：

<template>
  <div style="background-color: #00bfff;">
    <tabs index="0" >
      <tab-bar mode="fixed">
      </tab-bar>
      <tab-content>
        <div  style="flex-direction: column;">
          <text style="color: red">1</text>
          <stack class="video">
            <video class="video1" id="111" 
              src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4"
              onstart="start" ontouchmove="move" onseeked="seeked">
              </video>
              <div style="width: 100%;height:300px;" onclick="bof">
               </div>
          </stack>
        </div>
 
        <div  style="flex-direction: column;">
          <text style="color: red">2</text>
        </div>
 
        <div style="flex-direction: column;">
          <text style="color: red">3</text>
        </div>
 
      </tab-content>
    </tabs>
  </div>
</template>

欲了解更多详情，请参阅：

快利用 tabs 组件：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style

快利用 video 组件：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-video

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204404990358220225?fid=18

原作者：Mayism