0

当 tab-content 组件（tabs 的子组件）包含视频时，用户无法通过滑动来切换 tab 页，从而导致进度条被拖动。

发生异常的代码如下：

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

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

4

2 回答 2

1

在video和它的父节点栈之间添加一个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>

参考：

选项卡组件

视频分量

于 2021-03-01T06:29:18.477 回答
0

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

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

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

于 2021-03-04T23:01:20.130 回答