微信小程序 向左滑动删除功能的实现
微信小程序 向左滑动删除功能的实现
实现效果图:
实现代码:
1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件
<
view
class
=
"container"
>
<
view
class
=
"touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}"
data-index
=
"{{index}}"
bindtouchstart
=
"touchstart"
bindtouchmove
=
"touchmove"
wx:for
=
"{{items}}"
wx:key
=
""
>
<
view
class
=
"content"
>{{item.content}}</
view
>
<
view
class
=
"del"
catchtap
=
"del"
data-index
=
"{{index}}"
>删除</
view
>
</
view
>
</
view
>
2、wxss flex布局、css3动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.touch-item { font-size : 14px ;
display : flex;
justify- content : space-between;
border-bottom : 1px solid #ccc ;
width : 100% ;
overflow : hidden
} .content { width : 100% ;
padding : 10px ;
line-height : 22px ;
margin-right : 0 ;
-webkit-transition: all 0.4 s;
transition: all 0.4 s;
-webkit-transform: translateX( 90px );
transform: translateX( 90px );
margin-left : -90px
} .del { background-color : orangered;
width : 90px ;
display : flex;
flex- direction : column;
align-items: center ;
justify- content : center ;
color : #fff ;
-webkit-transform: translateX( 90px );
transform: translateX( 90px );
-webkit-transition: all 0.4 s;
transition: all 0.4 s;
} .touch-move-active .content, .touch-move-active .del { -webkit-transform: translateX( 0 );
transform: translateX( 0 );
} |
3、js 注释很详细
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
var app = getApp()
Page({ data: {
items: [],
startX: 0, //开始坐标
startY: 0
},
onLoad: function () {
for ( var i = 0; i < 10; i++) {
this .data.items.push({
content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦" ,
isTouchMove: false //默认全隐藏删除
})
}
this .setData({
items: this .data.items
})
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this .data.items.forEach( function (v, i) {
if (v.isTouchMove) //只操作为true的
v.isTouchMove = false ;
})
this .setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
items: this .data.items
})
},
//滑动事件处理
touchmove: function (e) {
var that = this ,
index = e.currentTarget.dataset.index, //当前索引
startX = that.data.startX, //开始X坐标
startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.items.forEach( function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return ;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
items: that.data.items
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del: function (e) {
this .data.items.splice(e.currentTarget.dataset.index, 1)
this .setData({
items: this .data.items
})
}
}) |