如何处理页签中有视频时无法通过滑动切换的问题?

Question

当选项卡内容组件(选项卡的子组件)包含视频时，用户无法滑动在选项卡页面之间切换，其结果是进度条被拖动。

出现异常的代码如下:

<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>

原因分析:视频组件被设置为选项卡的子组件，而这两个组件都支持滑动。当用户在视频区域中滑动时，系统将响应在标签页切换之前滑动的进度条，给定事件冒泡框架。

Answer 1

添加divvideo及其父节点堆栈来掩盖视频。确保div小于video在高度上确保进度条和按钮不被隐藏。当用户滑动视频区域时，他们是在滑动div组件。因为div视频和如果是兄弟节点，则视频进度条将不会被拖动。

示例代码如下:

<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>

引用:

标签组件

视频组件

Answer 2

布局需要区分触摸视频进度和触摸视频选项卡。所以我们需要在标签页中添加除视频之外的元素，例如

<stack class="video">
<video 
</video>
<div >
</div>
</stack>

额外的div或任何东西来覆盖没有颜色的视频这样标签就能检测到点击。假设用户知道不能触摸视频的下部来切换标签，这似乎是常见的行为。