小程序项目实战(十)

一、歌词的展示和自动滚动

        scroll-y垂直滚动 scroll-top:向上滚动的高度,这里的lyricScrollTop是歌曲播放时动态的计算当前播放的item index乘以文字的高度。

        在view中播放的index跟渲染的index相等时给他添加active效果

        在滚动区域中若想让滚动页面一开始有个上下的padding并且滚动的时候上面的歌词会开始填充上面的空白区域不要直接用padding,而是选择歌词的第一个或者最后一个元素添加padding或者margin属性

       ::-webkit-scrollbar:定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸  

 

 

 二、对播放页面的js文件代码进行重构

        因为在播放界面所用到的歌曲信息等在其他页面也有用得到的地方,所以可以将一些数据和方法抽取出来进行重构

        对数据共享可以使用app.js或者单独创建一个数据共享的文件，但是它们的缺点是不能响应式、所以还是使用之前的hy-eventStore进行重构

        将获取歌曲详情的信息，获取歌词数据,根据id播放对应的歌曲放在actions中

 

         获取playerStore中的数据,获取当前歌曲的信息、歌词信息和歌曲时长信息,得到的res是一个象,如果有数据, 则将数据保存起来

 

         在点击跳转到播放页时就开始根据id获取对应的数据

         点击返回按钮返回页面

        navbar页面

         将点击事件传递给播放页面处理

         对当前的时间,当前的歌词索引和歌词内容也进行数据共享

 

         在播放页面对数据进行监听

 

  三、实现播放模式切换和暂停开始功能

         给播放模式添加点击事件,并动态的切换playModeName

         根据点击事件将playModeIndex加一,如果结果等于三，则重新赋值为0，并将值赋予给store

        保存playModeIndex和playModeName,定义一个数组根据index获取playModeName 

 

 

         监听播放模式相关的数据,数据一改变则赋予给播放页面改变后的值

         

         点击播放暂停实现图片切换和播放暂停效果

         默认不播放和暂停

        store中也要记录是否播放 

 

        在action中一开始就修改为播放 

 

         判断当前是否播放,播放就暂停，并控制歌曲的播放和暂停

        在index.js中调用判断播放暂停的方法 

 

         监听播放和暂停的模式