环境搭建

git init -y

npm install --save-dev parcel-bundler

npx parcel index.html

npm install --save-dev sass

parcel.js使用文档
sass使用文档

---

全屏适配：

• 高度适配
  要在其他的平面高度也是满屏，看一下在header、footer设固定高度，中间用计算属性

height： 100vh - 270px

image.png

• 宽度适配
  尽量用vw，字体可以用rem等。

---

封装手势库

监听用户手滑起点和终点x的差值（ontouchmove -ontouchstart），判断用户左滑还是右滑，然后执行eventHub 中对应滑动的函数。this.on = function(type, fn)是将滑动后要执行函数上传到eventHub 中，然后检测到滑动eventHub['swipRight'].forEach(fn=>fn.bind(root)())里面函数依次执行。
用法：

let swiper = new Swiper(this.$('.panels'))
swiper.on('swipLeft', function () {
   this.classList.remove('panel1') 
   this.classList.add('panel2')
   console.log('left')
 })

class Swiper {
  constructor(node) {
    if(!node) throw new Error('需要传递需要绑定的DOM元素')
    let root = typeof root === 'string' ? document.querySelector(node) : node
    let eventHub = {'swipLeft': [], 'swipRight': []}

    let initX
    let newX
    let clock

    root.ontouchstart = function(e) {
      initX = e.changedTouches[0].pageX
    }

    root.ontouchmove = function(e) {
      if(clock) clearInterval(clock)
      clock = setTimeout(()=>{
        newX = e.changedTouches[0].pageX
        if(newX - initX > 50) {
          eventHub['swipRight'].forEach(fn=>fn.bind(root)())  //依次执行对应swipLeft或swipRight中的函数
        }else if(initX - newX > 50) {
          eventHub['swipLeft'].forEach(fn=>fn.bind(root)())  //里面的this就是bind里面的参数
        }
      }, 100)
    }

    this.on = function(type, fn) {
      if(eventHub[type]) {
        eventHub[type].push(fn) //将对应滑动的函数给上传到对应eventHub的滑动函数当中
      }
    }
    this.off = function(type, fn) {
      let index = eventHub[type].indexOf(fn)
      if( index !== -1) {
        eventHub[type].splice(index, 1)
      }
    }
  }
}

export default Swiper

---

歌词加载

1.歌词位置

歌词的文字处于中间位置且有白色样式。

歌词位置

歌词需要偏移高度

setLineToCenter(node) {
        //每个歌词要偏移的高度 = 歌词到最顶的高度 - 歌词容器一半的高度
        let translateY = node.offsetTop - this.$('.panel-lyrics').offsetHeight / 2
        //前面的歌词不需要滚动
        translateY = translateY > 0 ? translateY : 0
        this.$('.panel-lyrics .container').style.transform = `translateY(-${translateY}px)`
        this.$$('.panel-lyrics p').forEach(node => node.classList.remove('current'))
        node.classList.add('current')
    }

2.歌词处理

获得的歌词数据为

image.png

需要把歌词变成这种格式

[['00:00:01', 'abc'],['00:00:01', 'abc'],['00:00:01', 'abc'],['00:00:01', 'abc']]

    //定位歌词
    locateLyric() {
        console.log('locateLyric')
        let currentTime = this.audio.currentTime * 1000  //播放时间变成毫秒数，像368
        let nextLineTime = this.lyricsArr[this.lyricIndex + 1][0]  //当前数组[['123','歌词'],['234','歌词'],['456','歌词']]
        //如果当前时间大于数组歌词的时间且吧歌词不是最后一句，展示歌词。
        if (currentTime > nextLineTime && this.lyricIndex < this.lyricsArr.length - 1) {
            this.lyricIndex++
            let node = this.$('[data-time="' + this.lyricsArr[this.lyricIndex][0] + '"]') //找出对应时间的歌词
            if (node) this.setLineToCenter(node)  //让歌词展示到中间
            this.$$('.panel-effect .lyric p')[0].innerText = this.lyricsArr[this.lyricIndex][1]
            this.$$('.panel-effect .lyric p')[1].innerText = this.lyricsArr[this.lyricIndex + 1] ? this.lyricsArr[this.lyricIndex + 1][1] : ''
        }
    }