项目中的消息列表,和购物车列表需要左滑删除的需求还是挺多的,下面是消息左滑删除的思路和代码实现;
代码思路:
1、在获取到消息列表的时候,给每个消息一个是否显示删除按钮的默认值,全部为false
2、页面上消息列表每一项后面都有一个删除按钮,用transform
和margin-left
,flex
结合使删除按钮隐藏在列表后面,动态绑定class,当需要显示删除按钮的时候,通过css的transform
来显示删除按钮
3、给消息列表和删除按钮的父盒子绑定开始触摸和触摸中事件
4、开始触摸记录用户点击的坐标
5、触摸中里获取用户当前的坐标,和开始坐标比较,查看是否是左滑,来改变消息列表中是否显示删除的值
代码实现:
js
Page({
/**
* 页面的初始数据
*/
data: {
// 消息列表
msgList: [
{
img: '../../assect/images/img1.jpeg',
name: '不告诉你我的名字',
content: '这里是内容呀~~~~'
},
{
img: '../../assect/images/img1.jpeg',
name: '不告诉你我的名字',
content: '这里是内容呀~~~~'
},
{
img: '../../assect/images/img1.jpeg',
name: '不告诉你我的名字',
content: '这里是内容呀~~~~'
}
],
// 滑动的起始坐标
startX: 0,
startY: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.init()
},
init() {
// 设置是否删除为false
let {
msgList } = this.data
msgList.map(i => {
i.isMove = false
})
this.setData({
msgList
})
},
// 开始触摸,记录起始点的坐标
touchstart(e) {