小程序滑动删除功能及实现方式

　　小程序滑动删除功能在应用中很常见，一般是向左滑动列表可删除项目，那么这种形式要如何实现呢？

小程序滑动删除效果示例

　　每个列表项绑定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

　　})

　　},

　HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。