仿网易云播放页面设计

对于歌词的滚动部分，在设置歌词防止盒子的大小之后设置滚动，然后根据歌词时间的变化先进行设置歌词颜色的变色：

 timeUpdate(e){

            let lyricsObjArr=this.$store.getters.getLyric

            for (let i = 0; i <lyricsObjArr.length; i++) {

                if (e.target.currentTime>=lyricsObjArr[i].time) {

                    const index = this.$refs.playLyric[i].dataset.index

                    if (i === parseInt(index)) {

                        this.lyricIndex = i

                     

                    }

                }

            }

}

在防止歌词的标签中设置颜色的动态改变：

:class="{each:true, choose: (index==lyricIndex)}"

:style="{color: lyricIndex === index ? 'skyblue' : '#ded9d9'}"

:data-index='index'

然后对于歌词变化行进行监听，若变化行大于五的时候进行偏移量的设计

 watch:{

        lyricIndex: {

        handler() {

           //设置歌词的滚动

            if(this.lyricIndex>5){

                let num=document.querySelector('p.choose').offsetTop

                this.$refs.lyricUL.scrollTop = num-150//其中150根据自己的情况和效果进行设计

            }

           

    },

     //初始化页面后立即监听

     immediate : true

},

}

对于歌曲的总长度和播放进度条，总长度和当前播放的事件根据audio自身的属性duration获取总长度进行秒数换成分钟和秒针的操作即可，当前的即用cuurentTime进行如上操作即可如下所示：

              let count=this.$refs.audio.duration

                let m=parseInt(count/60%60)

                m=m<10? '0'+m:m

                let s=parseInt(count%60)

                s=s<10? '0'+s:s

                this.countTime=m+':'+s

当前的播放进度需要放在时间改变的监听里面，即timeUpdate(e)里面。

然后对于进度条的改变，在外层进度条设置一个div包裹住，然后内置一个div进行偏移量的填充即可。

样式：

.progress{

            width: 100%;

            height: 4px;

            border-radius: 30px;

            background-color:rgb(243, 242, 242);

            align-self: center;

            .progressbar{

                top:0;

                left: 0;

                margin: 0;

                height: 100%;

                background-color:rgb(177, 173, 165);

                border-radius: 30px;

            }

        }

在填充时动态设置.progressbar的宽度即可，同样是在事件改变时监听实现

this.sliderTime = parseInt( (e.target.currentTime /e.target.duration) * 100);

在.progressbar的盒子设置:style="'width:'+sliderTime+'%'"即可