微信小程序-向左滑动删除，取消收藏效果案例

微信小程序左滑删除效果的实现，平时用到的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
          })
        }
      }
    })
  
  },

如发现什么问题提可以留言交流哦，谢谢~
具体案列可访问：https://github.com/xiexikang/xcx-left-sliding-delete