微信小程序左滑删除效果的实现，平时用到的app也有使用到这种效果，对组件向左滑动，右侧会出现一个删除按钮，点击确认删除此组件模块；
效果图如下： wxml：
<view class="collect"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key=""> <view class="content"> <view class='com'> <view class='tp'> <image src="{{item.img}}" class='img' /> </view> <view class='txt'> <view class='tit'>{{item.title}}</view> <view class='bot'> <view class="pri {{item.type==0? 'pri-buy':'pri-play'}}"><label class='num'>￥{{item.price}}</label></view> <navigator class='a' wx:if = "{{item.type==0}}"> <image src="../imgs/ico-buy.png" class='ico' /> <label class='ti'>购买</label> </navigator> <navigator class='a' wx:else> <image src="../imgs/ico-play.png" class='ico' /> <label class='ti'>播放</label> </navigator> </view> </view> </view> </view> <view class="del" catchtap="cancleCollect" data-index="{{index}}">取消收藏</view> </view> </view>js代码：
//开始触摸时 touchstart(e) { var that = this; that.data.items.forEach(function (v, i) { if (v.isTouchMove){ v.isTouchMove = false; } }) that.setData({ startX: e.changedTouches[0].clientX, startY: e.changedTouches[0].clientY, items: that.data.items }) }, //滑动事件处理 touchmove(e) { var that = this, index = e.currentTarget.dataset.index, startX = that.data.startX,//开始X坐标 startY = that.data.startY,//开始Y坐标 touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标 touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标 //获取滑动角度 angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); that.data.items.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; //左滑 } } }) that.setData({ items: that.data.items }) }, // 计算滑动角度 start 起点坐标 end 终点坐标 angle(start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y //返回角度 /Math.atan()返回数字的反正切值 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); }, //取消收藏 cancleCollect(e) { var that = this, index = e.currentTarget.dataset.index, items = that.data.items; items[index].isTouchMove = true; that.setData({ items: items }) wx.showModal({ title: '温馨提示', content: '亲，您确定要取消此收藏吗？', success(res) { if (res.confirm) { items.splice(index, 1); that.setData({ items: items }) wx.showToast({ title: '取消收藏成功~', icon: 'success', duration: 1500 }) } else if (res.cancel) { items[index].isTouchMove = false; that.setData({ items: items }) } } }) },源码会持续更新到公众号，需要可以关注一下哦…
