當前播放歌詞高亮:根據當前播放時間,和歌詞時間對比,獲得當前歌詞行數索引正常居中滾動、點擊/滑動進度條對應滾動:(1)因為這幾種方式都是改變當前播放時間,所以只需要根據當前播放時間操作即可(2)根據當前播放時間,得到當前歌詞行數,因為設置歌詞和空白高度都是一定的,所以可以根據行數確定居中位置(3)當行數小于指定行或大于指定行時,滾動頂部/底部,在其中居中居中方式:將滾動條移動=當前行到頂部的距離(-90是因為父元素到滑動區域的距離有90)-行高度*在多少(n)行就可居中

效果圖:



代碼示例:

<template><div class='s'><div class='scale' @click="scale"><span><a-icon type="fullscreen-exit" /></span></div><div class='b-i'><img height="100px" :src="imgUrl" alt=""></div> <div class='c-c' :class={done:!isplay,on:isplay}><img :src="imgUrl" alt=""></div> <div class='c-l'><div class='c-i'><p>海闊天空</p><div>歌手: beyond</div></div><div class='c-lyr' ref='scroll' ><ul ref='ul'><!-- :class='{hight:high(item.time,lyrs[index+1].time,time)}' --><!-- :class='{hight:time>item.time&&time<lyrs[index+1].time}' --><!-- high(index,lyrs,time) --><li v-for="(item,index) in lyrs" :key='index' :class='{hight:index==highlightLine}'>{{item.lyr}}</li></ul></div></div></div> </template><script> import axios from 'axios';export default {name:'song',props:['isplay','time'],data(){return{imgUrl:'',lyric:'',lyrs:[],lis:[],tops:[],highlightLine:0}},methods:{scale(){this.$emit('mini')},//正則處理歌詞regRex(str){// var reg= /(ru)n(oob)/i//獲取歌詞貢獻者let regUser=/\[(.*)\]\n/igmlet user=regUser.exec(str);str=str.substring(user[0].length,str.length);//匹配歌詞let reg=/\[(.*)\](.*)\n/igmlet res;while(res=reg.exec(str)){this.lyrs.push({time:this._timeForm(res[1]),lyr:res[2]});}console.log(this.lyrs);},//將字符串xx:xx的時間格式處理成秒_timeForm(time){let index=time.indexOf(':');let min=time.substring(0,index);let seconds=time.substring(index+1,time.length);return min*60+seconds*1},//獲取每一個歌詞li的高度_initTops(arr){let tops=[];Array.from(arr).forEach((item,index)=>{tops.push(item.offsetTop);})this.tops=tops;console.log(this.tops);},//監聽任意方式得到的當前播放時間,來進行對象滾動,當index在歌詞前五行和后無行時,進行居中//歌詞和空白都是固定高度,所以可以通過歌詞的行數來確定居中//居中方式:當前行到頂部的距離(-90是因為父元素到滑動區域的距離有90)-在多少行就可以居中_scrollTo(index){console.log(index);if(index<5){this.$refs.scroll.scrollTop=0;}else if(index>=(this.lyrs.length-5)){this.$refs.scroll.scrollTop=this.$refs.scroll.scrollHeight;}else{this.$refs.scroll.scrollTop=this.tops[index]-90-(this.tops[index+1]-this.tops[index])*4}}},computed(){song(){// if}},async mounted () {let imgRes=await axios.get('https://api.imjad.cn/cloudmusic/?type=detail&id=346089');let lyricRes=await axios.get('https://api.imjad.cn/cloudmusic/?type=lyric&id=346089');this.imgUrl=imgRes.data.songs[0].al.picUrl;this.lyric=lyricRes.data.lrc.lyric;this.regRex(this.lyric);},watch:{lyrs(){this.$nextTick(()=>{this._initTops(this.$refs.ul.children);console.log(this.$refs.ul.children);})},//監聽當前播放時間,和轉換后的歌詞時間進行對比,獲得當前時間對應的歌詞行數//第一行時間之前,直接制頂,否則會因為findIndex找不到從而獲取到最后一行的索引time(time){if(time<this.lyrs[0].time){this.$refs.scroll.scrollTop=0;return ;}let index=this.lyrs.findIndex((item,index)=>{if(index<this.lyrs.length-1){return item.time<=time&&this.lyrs[index+1].time>=time}else{return true;}})console.log('第二個');this._scrollTo(index);this.highlightLine=index;}},} </script><style scoped lang='less'>.s{position: relative;height: 500px;width: 100%;>.scale{position: absolute;right: 40px;top:40px;width: 30px;height: 20px;border:solid 1px #ccc;border-radius: 4px;text-align: center;line-height: 20px;cursor: pointer;}.b-i{position: absolute;left: 25%;>img{width: 400px;height: 400px;filter:blur(20px) opacity(0.5);}}.c-c{height: 300px;width: 300px;border-radius: 300px;background: #2B2C2F;text-align: center;line-height: 300px;position: absolute;left: 0;margin: 80px 80px;animation: rot 20s linear infinite;>img{height: 200px;width: 200px;border-radius: 200px;}}.on{animation-play-state:running;}.done{animation-play-state:paused;}@keyframes rot {from {transform: rotate(0deg);}to{transform: rotate(360deg);}}.c-l{height: 450px;width: 400px;position: absolute;overflow: hidden;right: 70px;top:40px;box-sizing: border-box;display: flex;flex-direction: column;.c-i{flex: 1;>p{font-weight: 500;font-size:20px;margin-bottom:10px;}margin-bottom:30px;}.c-lyr{flex:8;width: 100%;overflow-y:scroll ;>ul{height: 100%;list-style: none;li{height: 35px;// padding: 7px 0;line-height: 35px;color: #555254;}.hight{color:white;}}}.c-lyr::-webkit-scrollbar {width: 8px;background-color:#FAFAFA;}.c-lyr::-webkit-scrollbar-thumb {border-radius: 10px;background-color:#E1E1E2;}}} </style>

總結

以上是生活随笔為你收集整理的网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。