优化首页视频播放逻辑

src/components/slide/SlideItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="base-slide-item" ref="slideItem">
+  <div class="base-slide-item">
     <slot></slot>
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-#base-slide-item {
+.base-slide-item {
   min-width: 100vw;
   min-height: 100vh;
   position: relative;

src/pages/home/Index2.vue

@@ -1,13 +1,20 @@
 <template>
   <div id="home-index">
     <SlideListVirtual direction="column"
-                      ref="ssss"
-                      :virtual="true"
+                      :virtual="false"
                       :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"/>
@@ -360,19 +367,20 @@ export default {
     t(e) {
       console.log(e)
     },
-    end(){
+    end() {
       console.log('end')
-      setTimeout(()=>{
-        [{
-          videoUrl: mp40,
-          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
-          videoPoster: src1Bg,
-          isLoved: true,
-          loves: 1234,
-          comments: 666,
-          shared: 999,
-          duration: 99
-        },
+      setTimeout(() => {
+        [
+          {
+            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',
@@ -416,7 +424,8 @@ export default {
         ].map(v => {
           this.videos.push(v)
         })
-      },5000)
+        console.log('ok')
+      }, 1000)
     }
 
   }

src/pages/home/SlideListVirtual.vue

@@ -70,15 +70,27 @@ export default {
       // console.log('activeIndex')
       // this.changeIndex()
     },
-    // list(){
-    //
-    // }
+    watchList: {
+      handler(newVal, oldVal) {
+        console.log(newVal)
+        console.log(oldVal)
+      },
+      deep: true
+    }
+  },
+  computed: {
+    //包装下，不然后watch里面监听到的新值和旧值是一样的，麻了
+    watchList() {
+      return [...this.list]
+    }
   },
   mounted: async function () {
-    this.slideList = this.$refs.slideList
-    this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
-      this.slideList.appendChild(this.getInsEl(item, index))
-    })
+    if (this.virtual) {
+      this.slideList = this.$refs.slideList
+      this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
+        this.slideList.appendChild(this.getInsEl(item, index))
+      })
+    }
     await this.checkChildren()
     this.changeIndex(true)
   },
@@ -192,19 +204,12 @@ export default {
               if (this.slideItems.length < this.defaultVirtualItemTotal) {
                 this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
               }
-              // console.log('this.currentSlideItemIndex', this.currentSlideItemIndex)
-              // console.log('this.slideItems.length >= this.defaultVirtualItemTotal',this.slideItems.length >= this.defaultVirtualItemTotal)
-              // console.log('this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2', this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2)
-              // console.log('this.currentSlideItemIndex <= this.list.length - 3', this.currentSlideItemIndex <= this.list.length - 3)
-              // console.log(this.slideItems.length >= this.defaultVirtualItemTotal
-              //     && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
-              //     && this.currentSlideItemIndex <= this.list.length - 3)
               if (this.slideItems.length >= this.defaultVirtualItemTotal
                   && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
                   && this.currentSlideItemIndex <= this.list.length - 3
               ) {
                 let res = $(`#base-slide-list .base-slide-item[data-index=${addItemIndex}]`)
-                console.log(res)
+                // console.log(res)
                 if (res.length === 0) {
                   this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
                   this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
@@ -215,17 +220,16 @@ export default {
                 }
               }
             } else {
-              // if (this.currentSlideItemIndex > 1) {
-              //   let item = this.list[this.currentSlideItemIndex - 2]
-              //   this.slideList.prepend(this.getInsEl(item, this.currentSlideItemIndex - 2))
-              //   this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
-              //   // $("#base-slide-list .base-slide-item:last").remove()
-              //   $(".base-slide-item").each(function () {
-              //     $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-              //   })
-              // }
+              if (this.currentSlideItemIndex > 1 && this.currentSlideItemIndex <= this.list.length - 4) {
+                let addItemIndex = this.currentSlideItemIndex - 2
+                this.slideList.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex))
+                this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
+                // $("#base-slide-list .base-slide-item:last").remove()
+                $(".base-slide-item").each(function () {
+                  $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+                })
+              }
             }
-
             this.checkChildren()
           }
         }