vue慕课网音乐项目手记：35-歌词左右滑动的实现

1、给middle添加touch事件

2、用一个currentShow保存歌词显示和影藏的状态：

3、touchstart的时候维护几个状态：记录x轴和y轴的坐标

middleTouchStart (e) {
      this.touch.init = true
      const touch = e.touches[0]
      this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
    },

4、touch'move如下：

middleTouchMove (e) {
      if (!this.touch.init) {
        return
      }
      const touch = e.touches[0]
      const deltaX = touch.pageX - this.touch.startX
      const deltaY = touch.pageY - this.touch.startY
      // 为什么维护纵轴，当纵轴大于横轴的偏移的时候，就不应该移动
      if (Math.abs(deltaY) > Math.abs(deltaX)) {
        return
      }
      // 首先记录歌词的起始位置
      const left = this.currentShow === 'cd' ? 0 : -window.innerWidth
      // 最终就两种状态，left的值有两种状态，如果是cd，就是0
      const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
      // 假如是左滑，那么dalte是负的
      this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
      //这个percent是维护偏移的距离，>0.1和<0.9
      this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
      // lyricList是一个scroll组件，是一个vue组件，通过$el可以获取dom
      this.$refs.lyricList.$el.style[transitionDuration] = 0
      this.$refs.middleL.style.opacity = 1 - this.touch.percent
    },

5、触摸结束如下：

middleTouchEnd () {
      let offsetWidth
      let opacity
      // 定义offset和opacity
      if (this.currentShow === 'cd') {
        // 如果在cd的情况下
        if (this.touch.percent > 0.1) {
          // 当活动距离超出0.1，做如下操作
          offsetWidth = -window.innerWidth
          opacity = 0
          this.currentShow = 'lyric'
        } else {
          offsetWidth = 0
          opacity = 1
          // 否则回复状态
        }
      } else {
        if (this.touch.percent < 0.9) {
          // 当活动距离小于0.9，做如下操作
          offsetWidth = 0
          opacity = 1
          this.currentShow = 'cd'
        } else {
          offsetWidth = -window.innerWidth
          opacity = 0
        }
      }
      const time = 300
      this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
      // 改变他的位置
      this.$refs.lyricList.$el.style[transitionDuration] = `${time}ms`
      // 过渡的时间，在move的时候要清零
      this.$refs.middleL.style.opacity = opacity
      this.$refs.middleL.style[transitionDuration] = `${time}ms`
    },