快應用tabs和video元件滑動事件優先順序問題

# 現象描述：
tabs子元件tab-content內容是video元件組成的，左右滑動切換tabs內容時，偶爾會不切換而是拖動影片進度條。

# 問題程式碼如下：

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

# 問題分析：
video元件是tabs的子元件，video元件和tabs元件都是自帶滑動能力，此問題關鍵在於滑動的地方在video區域上，根據事件從裡層往外層的冒泡機制，系統會優先處理video的滑動，而不是tabs的切換，而video的滑動效果就是我們看到的調整了影片播放進度。

# 解決方案：
在video區域上覆蓋一層div（video父節點stack增加子節點div），注意div的高低要小於video的高度，保證video底部的進度條、播放按鈕區域不被遮擋。當在video區域滑動時，實際上是在div上，由於div和video是兄弟節點，不會觸發video的滑動事件，完美解決了以上問題。

# 實現程式碼如下（見紅色部分）：

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

欲瞭解更多詳情，請參閱：

快應用tabs元件：

[https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style](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/doc/development/quickApp-References/quickapp-component-video)

---
原文連結：[https://developer.huawei.com/consumer/cn/forum/topic/0204404990358220225?fid=18](https://developer.huawei.com/consumer/cn/forum/topic/0204404990358220225?fid=18)

原作者：Mayism

快應用tabs和video元件滑動事件優先順序問題

相關文章