阅读 2142

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

快应用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组件:

developer.huawei.com/consumer/cn…

快应用video组件:

developer.huawei.com/consumer/cn…


原文链接:developer.huawei.com/consumer/cn…

原作者:Mayism

文章分类
Android
文章标签