1 middleTouchMove (e) {
 2
 3       if (!this.touch.init) {
 4
 5         return
 6
 7       }
 8
 9       const touch = e.touches[0]
10
11       const deltaX = touch.pageX - this.touch.startX
12
13       const deltaY = touch.pageY - this.touch.startY
14
15       // 为什么维护纵轴，当纵轴大于横轴的偏移的时候，就不应该移动
16
17       if (Math.abs(deltaY) > Math.abs(deltaX)) {
18
19         return
20
21       }
22
23       // 首先记录歌词的起始位置
24
25       const left = this.currentShow === 'cd' ? 0 : -window.innerWidth
26
27       // 最终就两种状态，left的值有两种状态，如果是cd，就是0
28
29       const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
30
31       // 假如是左滑，那么dalte是负的
32
33       this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
34
35       //这个percent是维护偏移的距离，>0.1和<0.9
36
37       this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
38
39       // lyricList是一个scroll组件，是一个vue组件，通过$el可以获取dom
40
41       this.$refs.lyricList.$el.style[transitionDuration] = 0
42
43       this.$refs.middleL.style.opacity = 1 - this.touch.percent
44
45     },

 1 middleTouchEnd () {
 2
 3       let offsetWidth
 4
 5       let opacity
 6
 7       // 定义offset和opacity
 8
 9       if (this.currentShow === 'cd') {
10
11         // 如果在cd的情况下
12
13         if (this.touch.percent > 0.1) {
14
15           // 当活动距离超出0.1，做如下操作
16
17           offsetWidth = -window.innerWidth
18
19           opacity = 0
20
21           this.currentShow = 'lyric'
22
23         } else {
24
25           offsetWidth = 0
26
27           opacity = 1
28
29           // 否则回复状态
30
31         }
32
33       } else {
34
35         if (this.touch.percent < 0.9) {
36
37           // 当活动距离小于0.9，做如下操作
38
39           offsetWidth = 0
40
41           opacity = 1
42
43           this.currentShow = 'cd'
44
45         } else {
46
47           offsetWidth = -window.innerWidth
48
49           opacity = 0
50
51         }
52
53       }
54
55       const time = 300
56
57       this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
58
59       // 改变他的位置
60
61       this.$refs.lyricList.$el.style[transitionDuration] = `${time}ms`
62
63       // 过渡的时间，在move的时候要清零
64
65       this.$refs.middleL.style.opacity = opacity
66
67       this.$refs.middleL.style[transitionDuration] = `${time}ms`
68
69     },

**if (this.currentLyric) {this.currentLyric.stop()}**

View Code

this.setPlayingState(!this.playing)if (this.currentLyric) {this.currentLyric.togglePlay()}

View Code

if (this.currentLyric) {this.currentLyric.seek(0)}

View Code