微信小程序 向左滑动删除功能的实现

前端之家收集整理的这篇文章主要介绍了微信小程序 向左滑动删除功能的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 向左滑动删除功能的实现

实现效果图:

实现代码

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 }) } })

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

猜你在找的微信小程序相关文章