仿qq会话列表滑动效果

Posted 2020-09-26 西风瘦马justin

一、功能分析

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 }