优化首页视频播放逻辑

src/pages/home/Index2.vue

@@ -1,20 +1,14 @@
 <template>
   <div id="home-index">
-    <SlideListVirtual direction="column"
-                      :virtual="false"
-                      :list="videos"
-                      :renderSlide="render"
-                      v-model:active-index="videoActiveIndex"
-                      @end="end"
+    <SlideListVirtual
+        ref="slideList"
+        direction="column"
+        :virtual="true"
+        :list="videos"
+        :renderSlide="render"
+        v-model:active-index="videoActiveIndex"
+        @end="end"
     >
-      <SlideItem v-for="(item,index)  of videos">
-        <Video1
-            v-model:video="videos[index]"
-            @showComments="isCommenting = !isCommenting"
-            @showShare="isSharing = !isSharing"
-            @goUserInfo="baseActiveIndex = 1"
-        ></Video1>
-      </SlideItem>
     </SlideListVirtual>
     <Comment v-model:is-commenting="isCommenting"/>
     <Share v-model:is-sharing="isSharing" ref="share"/>
@@ -302,16 +296,17 @@ export default {
       })
       // if (newVal >= this.videos.length - 3) {
       if (false) {
-        [{
-          videoUrl: mp40,
-          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
+        [
+          {
+            videoUrl: mp40,
+            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+            videoPoster: src1Bg,
+            isLoved: true,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },
           {
             videoUrl: mp41,
             // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
@@ -381,49 +376,51 @@ export default {
             shared: 999,
             duration: 99
           },
-          {
-            videoUrl: mp41,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: true,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp42,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp43,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
-          {
-            videoUrl: mp44,
-            // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-            videoPoster: src1Bg,
-            isLoved: false,
-            loves: 1234,
-            comments: 666,
-            shared: 999,
-            duration: 99
-          },
+          // {
+          //   videoUrl: mp41,
+          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          //   videoPoster: src1Bg,
+          //   isLoved: true,
+          //   loves: 1234,
+          //   comments: 666,
+          //   shared: 999,
+          //   duration: 99
+          // },
+          // {
+          //   videoUrl: mp42,
+          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          //   videoPoster: src1Bg,
+          //   isLoved: false,
+          //   loves: 1234,
+          //   comments: 666,
+          //   shared: 999,
+          //   duration: 99
+          // },
+          // {
+          //   videoUrl: mp43,
+          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          //   videoPoster: src1Bg,
+          //   isLoved: false,
+          //   loves: 1234,
+          //   comments: 666,
+          //   shared: 999,
+          //   duration: 99
+          // },
+          // {
+          //   videoUrl: mp44,
+          //   // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          //   videoPoster: src1Bg,
+          //   isLoved: false,
+          //   loves: 1234,
+          //   comments: 666,
+          //   shared: 999,
+          //   duration: 99
+          // },
         ].map(v => {
           this.videos.push(v)
         })
+        this.$refs.slideList.checkChildren()
+
         console.log('ok')
       }, 1000)
     }

src/pages/home/SlideListVirtual.vue

@@ -72,8 +72,24 @@ export default {
     },
     watchList: {
       handler(newVal, oldVal) {
-        console.log(newVal)
-        console.log(oldVal)
+        console.log(this.currentSlideItemIndex)
+        let endLength = newVal.length
+        if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
+          endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
+        }
+        let that = this
+        newVal.slice(oldVal.length, endLength).map((item, index) => {
+          this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
+          this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
+          // $("#base-slide-list .base-slide-item:first").remove()
+          $(".base-slide-item").each(function () {
+            $(this).css('top',
+                ((endLength - oldVal.length) > 1 ?
+                    (that.currentSlideItemIndex - 2) :
+                    (that.currentSlideItemIndex - 3)) *
+                that.wrapperHeight)
+          })
+        })
       },
       deep: true
     }