完善我的音乐页面

src/components/slide/SlideColumnList.vue

@@ -10,31 +10,9 @@
   </div>
 </template>
 <script>
-import * as Vue from 'vue'
-
 export default {
   name: "BaseSlideList",
   props: {
-    renderSlide: {
-      type: Function,
-      default: () => {
-        return null
-      }
-    },
-    virtual: {
-      type: Boolean,
-      default: () => false
-    },
-    list: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    defaultVirtualItemTotal: {
-      type: Number,
-      default: () => 5
-    },
     activeIndex: {
       type: Number,
       default: () => 0
@@ -61,123 +39,35 @@ export default {
       slideList: null,
       slideItems: null,
       slideItemsHeights: [],
-      appInsMap: new Map()
     }
   },
   watch: {
-    watchList: {
-      handler(newVal, oldVal) {
-        if (!this.virtual) return
-        if (oldVal.length === 0) {
-          let startIndex = 0
-          if (this.currentSlideItemIndex >= this.defaultVirtualItemTotal) {
-            startIndex = this.currentSlideItemIndex - (this.defaultVirtualItemTotal - 1) / 2
-          }
-          this.list.slice(startIndex, startIndex + 5).map(
-              (item, index) => {
-                let el = null
-                //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
-                if (startIndex + index === this.currentSlideItemIndex) {
-                  el = this.getInsEl(item, startIndex + index, true)
-                } else {
-                  el = this.getInsEl(item, startIndex + index)
-                }
-                this.slideList.appendChild(el)
-              })
-          let that = this
-          if (that.currentSlideItemIndex > 2) {
-            this.$setCss(this.slideList, 'transform', `translate3d(0px,
-             ${-this.currentSlideItemIndex * this.wrapperHeight}px,  0px)`)
-            $(".video-slide-item").each(function () {
-              $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-            })
-          }
-          setTimeout(this.checkChildren, 100)
-        } else {
-          let endLength = oldVal.length + 3
-          newVal.slice(oldVal.length, endLength).map((item, index) => {
-            this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
-          })
-          this.checkChildren()
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    //包装下，不然后watch里面监听到的新值和旧值是一样的，麻了
-    watchList() {
-      return [...this.list]
-    }
+    activeIndex() {
+      // console.log('activeIndex')
+      this.changeIndex()
+    },
   },
+  computed: {},
   mounted: async function () {
     await this.checkChildren()
-    if (this.virtual) {
-      this.currentSlideItemIndex = this.activeIndex
-      this.list.slice(this.currentSlideItemIndex, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
-        this.slideList.appendChild(this.getInsEl(item, index))
-      })
-    }
-    await this.checkChildren()
   },
   methods: {
-    getInsEl(item, index, play = false) {
-      let slideVNode = this.renderSlide(item, index, play)
-      const app = Vue.createApp({
-        render() {
-          return slideVNode
-        }
-      })
-      const parent = document.createElement('div')
-      const ins = app.mount(parent)
-      this.appInsMap.set(index, app)
-      // this.appInsMap.set(index, ins)
-      return ins.$el
-    },
     checkChildren() {
       this.slideList = this.$refs.slideList
       this.slideItems = this.slideList.children
       this.wrapperHeight = this.$getCss(this.slideList, 'height')
-
-      if (!this.virtual){
-        for (let i = 0; i < this.slideItems.length; i++) {
-          let el = this.slideItems[i]
-          this.slideItemsHeights.push(this.$getCss(el, 'height'))
-        }
+      for (let i = 0; i < this.slideItems.length; i++) {
+        let el = this.slideItems[i]
+        this.slideItemsHeights.push(this.$getCss(el, 'height'))
       }
     },
     touchStart(e) {
-      // console.log('this.slideItemsHeights',this.slideItemsHeights)
-
+      this.checkChildren()
       this.$setCss(this.slideList, 'transition-duration', `0ms`)
       this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-      this.toolbarStyleTransitionDuration = 0
       this.startLocationX = e.touches[0].pageX
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
-
-      if (this.virtual) {
-        let that = this
-        let items = $(".video-slide-item")
-        if (items.length > this.defaultVirtualItemTotal) {
-          let middle = (this.defaultVirtualItemTotal - 1) / 2
-          let removeNum = 0
-          items.each(function (index) {
-            if ($(this).data('index') === that.currentSlideItemIndex) {
-              console.log('start-index', index)
-              if (index !== middle) {
-                removeNum = index - middle
-              }
-            }
-          })
-          items.each(function (index) {
-            $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-          })
-          for (let i = 0; i < removeNum; i++) {
-            $(items[i]).remove()
-          }
-        }
-      }
     },
     touchMove(e) {
       this.moveXDistance = e.touches[0].pageX - this.startLocationX
@@ -187,24 +77,10 @@ export default {
 
       this.checkDirection()
 
-      //me页面，需要获取向下滑动的时候
-      if (!this.isDrawDown) {
-        this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
-      }
-
-      //todo 太卡了，后面考虑用原生js来写
-      // this.$attrs['onMove'] && this.$emit('move', {
-      //   x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
-      //   y: {distance: this.lastMoveYDistance, isDrawDown: this.isDrawDown},
-      // })
-
       if (this.isCanDownWiping) {
         if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
-        if (this.virtual) {
-          if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return
-        } else {
-          if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
-        }
+        if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
+
         // console.log('this.isCanDownWiping')
         this.$stopPropagation(e)
         this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) +
@@ -216,11 +92,8 @@ export default {
     touchEnd(e) {
       if (this.isCanDownWiping) {
         if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
-        if (this.virtual) {
-          if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
-        } else {
-          if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
-        }
+        if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
+
         this.$stopPropagation(e)
 
         this.$setCss(this.slideList, 'transition-duration', `300ms`)
@@ -235,51 +108,6 @@ export default {
           } else {
             this.currentSlideItemIndex -= 1
           }
-          // console.log(this.slideItems.length)
-          let that = this
-          if (this.virtual) {
-            if (this.isDrawDown) {
-              let addItemIndex = this.currentSlideItemIndex + 2
-              if (this.slideItems.length < this.defaultVirtualItemTotal) {
-                let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
-                if (res.length === 0) {
-                  this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
-                }
-              }
-              if (this.slideItems.length === this.defaultVirtualItemTotal
-                  && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
-                  && this.currentSlideItemIndex <= this.list.length - 3
-              ) {
-                let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
-                // console.log(videos)
-                if (res.length === 0) {
-                  this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
-                  this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount()
-                  // $("#base-slide-list .base-slide-item:first").remove()
-                  $(".video-slide-item").each(function () {
-                    $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-                  })
-                }
-              }
-              if (this.slideItems.length > this.defaultVirtualItemTotal) {
-                this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount()
-                $(".video-slide-item").each(function () {
-                  $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-                })
-              }
-            } else {
-              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 .video-slide-item:last").data('index')).unmount()
-                // $("#base-slide-list .base-slide-item:last").remove()
-                $(".video-slide-item").each(function () {
-                  $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
-                })
-              }
-            }
-            this.checkChildren()
-          }
         }
         this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px,  0px)`)
       }

src/pages/me/MyMusic.vue

@@ -14,7 +14,7 @@
         v-model:active-index="slideIndex">
       <SlideItem>
         <SlideColumnList>
-          <SlideItemMusic v-for="item in guessMusic"/>
+          <SlideItemMusic v-model="guessMusic[index]" v-for="(item,index) in guessMusic "/>
         </SlideColumnList>
       </SlideItem>
       <SlideItem style="overflow: auto;">
@@ -102,7 +102,7 @@
           <back style="opacity: 0;" mode="light" img="back"/>
         </div>
         <SlideColumnList>
-          <SlideItemMusic/>
+          <SlideItemMusic v-model="guessMusic[index]" v-for="(item,index) in guessMusic "/>
         </SlideColumnList>
       </div>
     </transition>
@@ -126,7 +126,7 @@ export default {
   },
   data() {
     return {
-      slideIndex: 1,
+      slideIndex: 0,
       currentMusic: {
         name: '告白气球',
         mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',

src/pages/me/components/SlideItemMusic.vue

@@ -2,7 +2,7 @@
   <div class="SlideItemMusic">
     <div v-show="!isFullLyrics">
       <div class="cover">
-        <img v-lazy="$imgPreview(currentMusic.cover)" alt="">
+        <img v-lazy="$imgPreview(modelValue.cover)" alt="">
       </div>
       <div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
         <div class="container">
@@ -19,8 +19,8 @@
     <div class="bottom">
       <div class="desc">
         <div class="left">
-          <div class="name">{{ currentMusic.name }}</div>
-          <div class="author">{{ currentMusic.author }}</div>
+          <div class="name">{{ modelValue.name }}</div>
+          <div class="author">{{ modelValue.author }}</div>
         </div>
         <div class="right">
           <div class="btn">
@@ -52,11 +52,9 @@
         <img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" @click="isLoop = !isLoop">
         <div class="center">
           <img src="@/assets/img/icon/me/previous.png" @click="t">
-          <!--                <img v-show="isPlay" class="control" src="@/assets/img/icon/me/pause.png" @click="togglePlay">-->
-          <!--                <img v-show="!isPlay" class="control" src="@/assets/img/icon/me/play.png" @click="togglePlay">-->
-          <img v-show="currentMusic.is_play" class="control" src="@/assets/img/icon/me/pause.png"
+          <img v-show="modelValue.is_play" class="control" src="@/assets/img/icon/me/pause.png"
                @click="togglePlay()">
-          <img v-show="!currentMusic.is_play" class="control" src="@/assets/img/icon/me/play.png"
+          <img v-show="!modelValue.is_play" class="control" src="@/assets/img/icon/me/play.png"
                @click="togglePlay()">
           <img src="@/assets/img/icon/me/next.png">
         </div>
@@ -68,12 +66,18 @@
 <script>
 import {nextTick} from "_vue@3.2.4@vue";
 import globalMethods from "../../../utils/global-methods";
+import gaobaiqiqiu from "../../../assets/data/lyrics/gaobaiqiqiu.lrc";
 
 export default {
   name: "SlideItemMusic",
   components: {},
   props: {
-    modelValue: false
+    modelValue: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
   },
   data() {
     return {
@@ -113,18 +117,62 @@ export default {
   computed: {},
   created() {
   },
+  mounted() {
+    this.audio.src = this.modelValue.mp3
+    if (process.env.NODE_ENV === 'development') {
+      this.audio.volume = .2
+    }
+    this.audio.addEventListener('loadedmetadata', e => {
+      this.duration = this.audio.duration
+      this.slideBarWidth = this.$refs.slideBar.clientWidth
+      this.step = this.slideBarWidth / Math.floor(this.duration)
+    })
+    let lrcObj = this.createLrcObj(gaobaiqiqiu);
+    this.lyricsTexts.push(lrcObj.ms[0])
+    this.lyricsTexts.push(lrcObj.ms[1])
+    lrcObj.ms.map(v => {
+      if (v.c) this.lyricsFullTexts.push(v)
+    })
+    // console.log(lrcObj.ms)
+    this.audio.addEventListener('timeupdate', e => {
+      let currentTime = Math.ceil(e.target.currentTime)
+      // let lastLyricsText = this.lyricsTexts[this.lyricsTexts.length - 1]
+      // if (Number(lastLyricsText.t) < currentTime) {
+      //   for (let i = 0; i < lrcObj.ms.length; i++) {
+      //     let item = lrcObj.ms[i]
+      //     if (Number(item.t) > currentTime) {
+      //       if (item.c) {
+      //         console.log(item)
+      //         this.t(item)
+      //         break
+      //       }
+      //     }
+      //   }
+      // }
+      if (!this.isMove) {
+        this.currentTime = currentTime
+        if (Math.ceil(e.target.currentTime) * this.step > this.slideBarWidth - 5) {
+          this.pageX = this.slideBarWidth - 5
+        } else {
+          this.pageX = Math.ceil(e.target.currentTime) * this.step
+        }
+      }
+    })
+    this.audio.addEventListener('play', e => this.isPlay = true)
+    this.audio.addEventListener('ended', e => {
+      if (this.isLoop) {
+        this.lastPageX = 0
+        this.audio.currentTime = 0
+        this.audio.play()
+      } else {
+        this.isPlay = false
+      }
+    })
+  },
   methods: {
-    playMusic(item) {
-      this.collectMusic.map(v => v.is_play = false)
-      this.recommendMusic.map(v => v.is_play = false)
-      item.is_play = true
-      this.currentMusic = item
-      this.audio.src = this.currentMusic.mp3
-      this.togglePlay(true)
-    },
     togglePlay(state) {
-      this.currentMusic.is_play = state || !this.currentMusic.is_play
-      if (this.currentMusic.is_play) {
+      this.modelValue.is_play = state || !this.modelValue.is_play
+      if (this.modelValue.is_play) {
         this.audio.play()
       } else {
         this.audio.pause()
@@ -287,6 +335,7 @@ export default {
   }
 
   .lyrics-full {
+    margin-top: 8rem;
     width: 100vw;
     height: 60vh;
     display: flex;