perf: video-swiper切换优化

src/components/custom/video.wpy

@@ -2,12 +2,11 @@
   <view class="container">
     <swiper
       class="video-swiper"
-      duration="600"
+      duration="300"
       circular="{{circular}}"
       vertical
       current="1"
-      bindchange="moveSwiper"
-      bindanimationfinish="animationfinish">
+      bindchange="moveSwiper">
       <swiper-item wx:for="{{curQueue}}" wx:key="index">
         <view class="video-swiper">
           <video
@@ -45,13 +44,15 @@
         </view>
       </swiper-item>
     </swiper>
-    <van-popup show="{{showPopup}}" close-on-click-overlay="{{false}}" overlay-style="background-color:transparent"></van-popup>
   </view>
 </template>
 <script>
   import wepy from '@wepy/core';
   import { getProbability } from '../../common/raffleProbability';
   import { getAwardsDetail, getPrizeList } from '../../common/api.js';
+
+  let playTimer = null;
+
   wepy.component({
     props: {
       videoList: {
@@ -77,7 +78,6 @@
       _videoContexts: [],
       currentIndex: 1,
       videoPause: false,
-      showPopup: false,
       videoLoading: true
     },
     watch: {
@@ -147,11 +147,6 @@
         this.videoPause = false;
         this.videoLoading = true;
         if (e.$wx.detail.source === 'touch') {
-          // 增加一个透明遮罩层，控制用户滑动速度，500ms内只能滑动一次，解决用户滑动过快，不触发animationfinish的bug
-          this.showPopup = true;
-          setTimeout(() => {
-            this.showPopup = false;
-          }, 500);
           const current = e.$wx.detail.current;
           this.currentIndex = current;
           // 如果next中如果就剩下4个了，请求下一页
@@ -160,6 +155,7 @@
               this._videoListChanged(data);
             });
           }
+          this.animationfinish(e);
         }
       },
       animationfinish (e) {
@@ -221,18 +217,23 @@
         this.circular = circular;
       },
       playCurrent (current) {
-        this.curQueue[current] && this.getProgress(this.curQueue[current].id);
-        // 滑动到当前元素时，其他video都暂停，只播放当前video
-        this._videoContexts.forEach(function (ctx, index) {
-          if (ctx) {
-            if (index !== current) {
-              ctx.pause();
-            } else {
-              ctx.play();
-            }
-          }
+        this.$nextTick(() => {
+          if (playTimer) clearTimeout(500);
+          playTimer = setTimeout(() => {
+            this.curQueue[current] && this.getProgress(this.curQueue[current].id);
+            // 滑动到当前元素时，其他video都暂停，只播放当前video
+            this._videoContexts.forEach(function (ctx, index) {
+              if (ctx) {
+                if (index !== current) {
+                  ctx.pause();
+                } else {
+                  ctx.play();
+                }
+              }
+            });
+            this.updateAwardsInfo(current);
+          }, 500);
         });
-        this.updateAwardsInfo(current);
       },
       videoTap(e) {
         const current = e.currentTarget.dataset.index;