一、功能分析

qq會話列表可以向左滑動，然後出現刪除按鈕

二、知識點

touch事件，css3的transform屬性

三、實現思路

為每個列表項綁定touch事件，計算touch移動的距離，在touchmove事件中實現滑動，在touchend中判斷touch移動的距離，根據距離大小判斷刪除按鈕是否彈出

四、js代碼

 1 // 左滑列表項，刪除按鈕出現，右滑消失
 2 window.onload = function(){
 3     //獲取rem的值
 4     sRem = document.querySelector(‘html‘).style.fontSize;
 5     sRem = parseInt(sRem);
 
 6     var items = document.querySelectorAll(‘.item‘);
 7 
 8     var deletes = document.querySelectorAll(‘.delete‘);
 9     //給每個Li綁定滑動事件
10     var startX = 0,moveX = 0,distanceX = 0;
11     
12     var translateX = 0;
13 
14     var flag = 0;
15 
16     var target ;//記錄當前滑動的列表項
17     items.forEach(function
 
(v,i){
18 
19         v.addEventListener(‘touchstart‘,function(e){
20             startX = e.touches[0].clientX;
21 
22 
23             //當操作下一行列表項的時候，把上一次操作元素恢復原來的位移
24             if(target !== this && target){
25                 target.style.transform = ‘translateX(0rem)‘;
26                 target.style.webkitTransform = ‘translateX(0rem)‘;
 
27             }
28 
29         })
30         v.addEventListener(‘touchmove‘,function(e){
31             moveX = e.touches[0].clientX;
32             
33             distanceX = (moveX - startX)/sRem;
34                 //在起始位置只能向左移動
35                 if(translateX == 0 && distanceX < 0){
36 
37                     transX(this,distanceX);
38                     
39 
40                 }
41                 //在最左端的時候，只能向右移動
42                 if(translateX == -4 && distanceX > 0){
43                     distanceX += -4;
44                     transX(this,distanceX);
45                     
46                 }
47             
48                 
49         })
50         v.addEventListener(‘touchend‘,function(e){
51             //點擊刪除按鈕時，避免執行touch事件
52             deletes.forEach(function(v,i){
53                 if(v == e.target){
54                     flag = 1;
55                 }
56             })
57             if(flag){
58                 flag = 0 ;
59                 return;
60             }
61             //移動向左超過一半，就完全滑動到左邊
62             if(distanceX < -2 ){
63                 v.style.transform = ‘translateX (‘ + (-4) + ‘rem)‘;
64                 v.style.webkitTransform = ‘translateX(‘ + (-4) + ‘rem)‘;
65                 translateX = -4;
66                 
67             }
68             //移動向右超過一半，就完全滑動到起始位置
69             if(distanceX >= -2){
70                 v.style.transform = ‘translateX (‘ + 0 + ‘rem)‘;
71                 v.style.webkitTransform = ‘translateX(‘ + 0 + ‘rem)‘;
72                 translateX = 0;
73             }
74 
75             target = this;
76             startX = 0;
77             moveX = 0 ;
78             distanceX = 0 ;
79         
80         })
81     })
82 
83     //列表項位移函數
84     function transX(v,x){
85     //限制向左滑動的最大距離    
86                 if(x <= -4){
87                     x = -4;
88                     
89                 }
90     //限制向右滑動的最大距離
91                 if(x >= 0){
92                     x = 0;
93                 }
94 
95                 v.style.transform = ‘translateX (‘ + x + ‘rem)‘;
96                 v.style.webkitTransform = ‘translateX(‘ + x + ‘rem)‘;    
97             
98     }
99 }

仿qq會話列表滑動效果