合并

src/components/custom/videolist.wpy

@@ -20,22 +20,21 @@
     .info {
       line-height: 40rpx;
     }
-    will-change: transform;
   }
   .progress {
     width: 180rpx;
-    height:20rpx;
-    background-color:#fff;
-    margin-top:10rpx;
-    color:#666;
+    height: 20rpx;
+    background-color: #fff;
+    margin-top: 10rpx;
+    color: #666;
     position: relative;
-    .text{
+    .text {
       position: absolute;
-      top:0;
-      left:0;
+      top: 0;
+      left: 0;
       width: 100%;
-      height:100%;
-      z-index:2;
+      height: 100%;
+      z-index: 2;
       background-color: transparent;
       text-align: center;
       font-size: 18rpx;
@@ -47,6 +46,9 @@
       background-color: #FF5D15;
     }
   }
+  .images {
+    width: 100%;
+  }
 </style>
 <template>
   <view class="container">
@@ -62,7 +64,7 @@
       <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
       <swiper-item wx:for="{{curQueue}}" wx:key="index">
         <view class="video-wrapper">
-          <video
+          <!-- <video
             id="video_{{index}}"
             class="video_item"
             loop
@@ -79,7 +81,7 @@
             @tap="videoTap"
           >
             <video-pause :pause="pause"></video-pause>
-          </video>
+          </video> < !-->
           <view class="rightcont">
             <view class="info">奖品库存: 1/8</view>
             <view class="info">中奖概率: {{item.id}}/3000</view>
@@ -88,7 +90,8 @@
               <view class="orange" style="{{progressStyle}}"></view>
             </view>
           </view>
-          <video-loading v-if="item.time === 0"/>
+          <!-- <video-loading v-if="item.time === 0"/> -->
+          <image class="images" :src="item.url" mode="widthFix"></image>
         </view>
       </swiper-item>
     </swiper>
@@ -102,13 +105,13 @@
         type: Array,
         value: []
       },
-      loading: {
-        type: Boolean,
-        default: false
-      },
       duration: {
         type: Number,
         value: 800
+      },
+      total: {
+        type: Number,
+        value: 0,
       }
     },
     data: {
@@ -124,10 +127,12 @@
       _videoContexts: [],
       progress:0,
       progressStyle:'',
+      loading: false
     },
     watch: {
       videoList () {
         const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        this.loading = false;
         if (newVal.length) this._videoListChanged(newVal);
       }
     },
@@ -156,17 +161,19 @@
         const current = e.$wx.detail.current;
         console.log(current);
         const diff = current - this._last;
-        if (diff === 0) {
-          console.log(this.nextQueue.length);
-          return;
-        }
+        if (diff === 0) return;
         this._last = current;
-        // this.playCurrent(current);
-        this.$emit('change', { activeId: this.curQueue[current].id });
+        this.playCurrent(current);
+        // this.$emit('change', { activeId: this.curQueue[current].id });
+        this.loading = true;
+        this.circular = false;
+
         setTimeout(() => {
           const direction = diff === 1 || diff === -2 ? 'up' : 'down';
           if (direction === 'up') {
             if (this._invalidDown === 0) {
+              // console.log(this.nextQueue, this.nextQueue.length, this.prevQueue, this.prevQueue.length);
+              // if (this.nextQueue.length === 0) {this.nextQueue.push(this.prevQueue.shift())}
               const change = (this._change + 1) % 3;
               const add = this.nextQueue.shift();
               const remove = this.curQueue[change];
@@ -174,6 +181,7 @@
                 this.prevQueue.push(remove);
                 this.curQueue[change] = add;
                 this._change = change;
+                if (this.nextQueue.length === 0) this.nextQueue.push(this.prevQueue.shift());
               } else {
                 this._invalidUp += 1;
               }
@@ -183,6 +191,7 @@
           }
           if (direction === 'down') {
             if (this._invalidUp === 0) {
+              // if (this.prevQueue.length === 0) {this.prevQueue.push(this.nextQueue.pop())}
               const _change2 = this._change;
               const _remove = this.curQueue[_change2];
               const _add = this.prevQueue.pop();
@@ -190,6 +199,7 @@
                 this.curQueue[_change2] = _add;
                 this.nextQueue.unshift(_remove);
                 this._change = (_change2 - 1 + 3) % 3;
+                if (this.prevQueue.length === 0) this.prevQueue.push(this.nextQueue.pop());
               } else {
                 this._invalidDown += 1;
               }
@@ -198,16 +208,16 @@
             }
           }
           this.circular = true;
-          if (this.nextQueue.length === 0 && current !== 0) {
-            this.circular = false;
-          }
-          if (this.prevQueue.length === 0 && current !== 2) {
-            console.log('circular2');
-            this.circular = false;
-          }
-          this.playCurrent(current);
-          console.log(this.prevQueue, this.curQueue, this.nextQueue);
-        });
+          // if (this.nextQueue.length === 0 && current !== 0) {
+          //   this.circular = false;
+          // }
+          // if (this.prevQueue.length === 0 && current !== 2) {
+          //   console.log('circular2');
+          //   this.circular = false;
+          // }
+
+        })
+          console.log(this.prevQueue, this.curQueue, this.nextQueue)
       },
       onWaiting (e) {
         this.trigger(e, 'wait');
@@ -232,7 +242,6 @@
       },
       playCurrent(current) {
         this._videoContexts.forEach((ctx, index) => {
-//          console.log('playCurrent', current, index);
           if (index !== current) {
             ctx.pause();
           } else {