问题描述
tab-content组件(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>
原因分析: 视频组件设置为tabs的子组件,同时两个组件都支持滑动。当用户在视频区域滑动时,系统会在标签页切换之前响应进度条的滑动,给定事件冒泡框架。
解决方法
在video 与其父节点stack 之间添加一个div 组件来覆盖视频。确保 div 的高度低于 video,以确保进度条和按钮不被隐藏。当用户在视频区域上滑动时,他们会在 div 组件上滑动。由于div和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>
参考文献:
,布局需要区分触摸视频进度和触摸视频标签。 所以我们需要在标签中包含视频之外的元素,例如
<stack class="video">
<video
</video>
<div >
</div>
</stack>
额外的 div 或任何内容来覆盖没有颜色的视频 以便选项卡检测点击。 假设用户知道不要触摸视频的下部来交换标签,这似乎是常见的行为。