微信小程序 向左滑动删除功能的实现
实现效果图:
实现代码:
1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件
2、wxss flex布局、css3动画
3、js 注释很详细
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
})
}
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:https://www.f2er.com/weapp/40809.html