H5W3
当前位置:H5W3 > Andriod > 正文

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

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

华为开发者论坛发布于 今天 06:35

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

现象描述:

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

问题代码如下:

<template>
<div>
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div >
<text>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 >
<text>2</text>
</div>
<div>
<text>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>
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div >
<text>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 onclick="bof">
</div>
</stack>
</div>
<div >
<text>2</text>
</div>
<div>
<text>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

android
阅读 542发布于 今天 06:35
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

华为开发者论坛
华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干…
avatar

华为开发者论坛

华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干货、华为源码开放、HMS最新活动等信息,欢迎大家来交流分享!

296 声望
24 粉丝

0 条评论
得票时间

avatar

华为开发者论坛

华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干货、华为源码开放、HMS最新活动等信息,欢迎大家来交流分享!

296 声望
24 粉丝

宣传栏

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

现象描述:

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

问题代码如下:

<template>
<div>
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div >
<text>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 >
<text>2</text>
</div>
<div>
<text>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>
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div >
<text>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 onclick="bof">
</div>
</stack>
</div>
<div >
<text>2</text>
</div>
<div>
<text>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

本文地址:H5W3 » 【安卓】快应用tabs和video组件滑动事件优先级问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址