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

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

现象描述：

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

问题代码如下：

问题分析：

video组件是tabs的子组件，video组件和tabs组件都是自带滑动能力，此问题关键在于滑动的地方在video区域上，根据事件从里层往外层的冒泡机制，系统会优先处理video的滑动，而不是tabs的切换，而video的滑动效果就是我们看到的调整了视频播放进度。

解决方案：

在video区域上覆盖一层div（video父节点stack增加子节点div），注意div的高低要小于video的高度，保证video底部的进度条、播放按钮区域不被遮挡。当在video区域滑动时，实际上是在div上，由于div和video是兄弟节点，不会触发video的滑动事件，完美解决了以上问题。

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

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

快应用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