效果图
滑动效果+删除
思路
- 每个列表项绑定
touchstart和touchmove事件，监听滑动手势，确定滑动角度，判断滑动是否有效 - 列表数据源每一项包含标志值
isTouchMove，用来确定此项是否滑动成功 - 列表项有两个类，根据
isTouchMove的值来确定渲染那个类 - 删除时直接操作数据源
关键代码段
touchmove: function (e) {
let index = e.currentTarget.dataset.index,//当前索引
startX = this.data.startX,//开始X坐标
startY = this.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
this.data.list.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
}
})
// //更新数据
this.setData({
list: this.data.list
})
},
源码
源码请移步github>>>>>>去看源码
