最近一直在开发微信小程序,无奈得实现开发的各种要求, 这不, 收藏夹的列表页需要添加一个左滑删除操作的功能, 于是在网上查阅了各种资料, 借鉴了大神们的一些思路, 好歹也能实现功能了吧, 这里就稍微记录一下, 就当作是自己的东西了吧, 哈哈 ^_^

废话不多说, 先来看一下效果吧!!!

wxml 结构

  • touch-item元素绑定了bindtouchstart、bindtouchmove事件
1
2
3
4
5
6
7
8
9
10
11
12
<view wx:for="{{patents}}" wx:key="" class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{index}}">
<view class="item" >
<!-- ...其他代码 -->
<view class="meta">
<view class="title">{{ item.title }}</view>
<view class="apply">申请号: {{ item.applicationNumber }}</view>
<view class="apply">申请日: {{ item.applicationDate }}</view>
<view class="apply">公开号: {{ item.publicNumber }}</view>
</view>
</view>
<view class='del' catchtap="delItem" data-index="{{index}}">删除</view>
</view>

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
/* 核心样式 */
.touch-item .item {
width: 100%;
padding: 20rpx;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(160rpx);
transform: translateX(160rpx);
margin-left: -160rpx
}

.del {
background-color: orangered;
font-size: 30rpx;
width: 160rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(160rpx);
transform: translateX(160rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

.touch-move-active .item,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}

js 交互

  • touchstart 和 touchmove 事件的处理
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// 获取全局应用程序实例对象
const app = getApp()

Page({

/**
* 页面的初始数据
*/
data: {
showTopBtn: false,
total: 0,
hasMore: true,
page: 1,
size: 20,
patents: [],
startX: 0, //开始坐标
startY: 0
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 手指触摸动作开始 记录起点X坐标
*/
touchStart(e) {
//开始触摸时 重置所有删除
this.data.patents.forEach(function (v, i) {
if (v.isTouchMove) //只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
patents: this.data.patents
})
},

/**
* 手指滑动事件处理
*/
touchMove(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; // 滑动变化坐标
var angle = that.getAngle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); // 获取滑动角度

that.data.patents.forEach(function (v, i) {
v.isTouchMove = false;
if (Math.abs(angle) > 30) return; //滑动超过30度角 return
if (i == index && touchMoveX < startX) { // 左滑
v.isTouchMove = true;
} else { // 右滑
v.isTouchMove = false;
}
})
//更新数据
that.setData({
patents: that.data.patents
})
},

/**
* 删除事件
*/
delItem(e) {
var that = this;
//获取列表中要删除项的下标
var index = e.currentTarget.dataset.index;
this.data.patents[index].isTouchMove = true;
//更新数据
this.setData({
patents: that.data.patents
})

wx.showModal({
title: '提示',
content: '确认是否删除?',
success: function (res) {
if (res.confirm) {
var list = that.data.patents;
//移除列表中下标为index的项
list.splice(index, 1);
//更新列表的状态和缓存
that.setData({
patents: list,
total: list.length
});
wx.setStorageSync('FAVORITE', list)
// 重新写入用户文件
app.wechat.writeFile('favorite.json', list)

wx.showToast({
title: '删除成功',
duration: 1500
})
} else {
// 取消则复原
that.data.patents[index].isTouchMove = false;
//更新数据
that.setData({
patents: that.data.patents
})
}
}
})
},

/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
getAngle(start, end) {
var _X = end.X - start.X;
var _Y = end.Y - start.Y;
// 返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
}
})