快应用tabs和video组件滑动事件优先级问题
Posted 华为开发者论坛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快应用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组件:
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
以上是关于快应用tabs和video组件滑动事件优先级问题的主要内容,如果未能解决你的问题,请参考以下文章
问题记录解决滑动冲突问题 - 监听滑动事件,阻止滑动事件冒泡
问题记录解决滑动冲突问题 - 监听滑动事件,阻止滑动事件冒泡
问题记录解决滑动冲突问题 - 监听滑动事件,阻止滑动事件冒泡
问题记录解决滑动冲突问题 - 监听滑动事件,阻止滑动事件冒泡