Quickly apply tabs and video components to slide event priority issues

Symptom Description:

Tabs Subcomponent Tab-Content Is a component of the video component. When you slide left and right to switch tabs, you will occasionally drag the progress bar instead of switching tabs.

The problem code is as follows:

<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>
Copy the code

Problem analysis:

The video component is a sub-component of Tabs. Both the video component and Tabs have their own sliding ability. The key to this problem is that the sliding place is in the video area. And the sliding effect of video is what we see adjusting the video playback progress.

Solution:

Cover the video area with a div layer (add a child node div to the stack of the parent node of video). Note that the height of div should be smaller than the height of video to ensure that the progress bar and play button area at the bottom of video are not blocked. When sliding in the video area, it is actually on div. Since div and video are brother nodes, the sliding event of video will not be triggered, which perfectly solves the above problems.

The implementation code is as follows (see red) :

<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>
Copy the code

For more details, please refer to:

Quickly apply tabs:

Developer.huawei.com/consumer/cn…

Quick application Video components:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism