优化首页视频播放逻辑

src/components/Video.vue

@@ -29,23 +29,23 @@
             </div>
             <div class="love mb15p" @click.stop="loved($event)">
               <div>
-                <img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved">
+                <img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
                 <img src="../assets/img/icon/loved.svg" class="love-image" v-else>
                 <!--                <transition name="love">-->
                 <!--                </transition>-->
                 <!--                <transition name="loved">-->
                 <!--                </transition>-->
               </div>
-              <span>{{ video.loves }}</span>
+              <span>{{ lVideo.loves }}</span>
             </div>
-            <!--            <div class="message mb15p" @click.stop="$emit('showComments')">-->
-            <div class="message mb15p" @click.stop="showComment">
+            <div class="message mb15p" @click.stop="$emit('showComments')">
+              <!--            <div class="message mb15p" @click.stop="showComment">-->
               <img src="../assets/img/icon/message.svg" alt="" class="message-image">
-              <span>{{ video.comments }}</span>
+              <span>{{ lVideo.comments }}</span>
             </div>
             <div v-if="!isMy" class="share mb35p" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
-              <span>{{ video.shared }}</span>
+              <span>{{ lVideo.shared }}</span>
             </div>
             <div v-else class="share mb35p" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
@@ -192,7 +192,8 @@ export default {
       point: null,
       isMove: false,
       currentVideoId: 'a' + Date.now(),
-      test: [1, 2]
+      test: [1, 2],
+      lVideo: this.video
     }
   },
   mounted() {
@@ -215,10 +216,10 @@ export default {
         video.removeEventListener('timeupdate', fun)
       }
     })
-    video.addEventListener('play', e=>{
+    video.addEventListener('play', e => {
       this.isPlaying = true
     })
-    video.addEventListener('pause', e=>{
+    video.addEventListener('pause', e => {
       this.isPlaying = false
     })
   },
@@ -272,12 +273,8 @@ export default {
     },
 
     loved(e, index) {
-      // console.log(e)
-      // let temp = this.$clone(this.video)
-      let temp = globalMethods.$clone(this.video)
-      temp.isLoved = !temp.isLoved
-      this.$emit('update:video', temp)
-      this.$emit('videoTest', {item: temp, index: this.index})
+      this.lVideo.isLoved = !this.lVideo.isLoved
+      this.$emit('update:video', this.lVideo)
     },
     move(e) {
       this.isMove = true

src/pages/home/Index2.vue

@@ -151,14 +151,14 @@ export default {
       isCommenting: false,
       isSharing: false,
       videoActiveIndex: 0,
-      render: (item, itemIndex, slideItemIndex) => {
+      render: (item, itemIndex) => {
         return (
             <div className="base-slide-item" data-index={itemIndex}>
               <Video1 disabled={itemIndex !== 0}
                       video={item}
                       index={itemIndex}
-                      onShowShare={this.t}
-                      onVideoTest={this.t}
+                      onShowComments={e => this.isCommenting = true}
+                      onShowShare={e => this.isSharing = true}
                       v-model={[this.videos[itemIndex], 'video']}
               />
             </div>
@@ -230,7 +230,8 @@ export default {
             comments: 666,
             shared: 999,
             duration: 99
-          },].map(v => {
+          },
+        ].map(v => {
           this.videos.push(v)
         })
 
@@ -243,11 +244,6 @@ export default {
   },
   methods: {
     t(e) {
-      console.log(this.videoActiveIndex)
-      this.$refs.ssss.update(e.index)
-      // console.log(this.videos)
-      // this.isSharing = !this.isSharing
-      // console.log(111)
       console.log(e)
     },
 

src/pages/home/SlideListVirtual.vue

@@ -86,6 +86,7 @@ export default {
       toolbarStyleTransitionDuration: 0,
       homeLoadingMoveYDistance: 0,//homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
       //在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
+      appInsMap: new Map()
     }
   },
   watch: {
@@ -116,6 +117,7 @@ export default {
   mounted: async function () {
     await this.checkChildren(true)
     this.list.slice(0, 3).map((item, index) => {
+
       this.slideList.appendChild(this.getInsEl(item, index))
     })
     // await this.checkChildren(true)
@@ -123,12 +125,8 @@ export default {
     // this.changeIndex(true)
   },
   methods: {
-    update(index) {
-      let newEl = this.getInsEl(this.list[index], index)
-      $(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
-    },
-    getInsEl(v, index) {
-      let slideVNode = this.renderSlide(v, index, this.currentSlideItemIndex)
+    getInsEl(item, index) {
+      let slideVNode = this.renderSlide(item, index)
       const app = Vue.createApp({
         render() {
           return slideVNode
@@ -136,6 +134,7 @@ export default {
       })
       const parent = document.createElement('div')
       const ins = app.mount(parent)
+      this.appInsMap.set(index, app)
       return ins.$el
     },
     t() {
@@ -272,6 +271,7 @@ export default {
                 if (this.currentSlideItemIndex > 2) {
                   let item = this.list[this.currentSlideItemIndex + 2]
                   this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
+                  // 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', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
@@ -281,6 +281,7 @@ export default {
                 if (this.currentSlideItemIndex > 1) {
                   let item = this.list[this.currentSlideItemIndex - 2]
                   this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
+                  // 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)