微信小程序（二）学妹问我微信小程序左滑删除怎么实现

<block wx:for="{{infoList}}" wx:for-index="index" wx:key="id" wx:for-item="item">
  <movable-area >
    <movable-view class="item" damping="100" direction="horizontal" out-of-bounds="true" animation="true">
      <!-- 滑动删除左边显示信息的盒子 -->
      <view></view>
      <!-- 右边删除按钮的盒子 -->
      <view bindtap="handleDelShop">删除</view>
    </movable-view>
  </movable-area>
</block>
    
  // js 代码  
  // 删除商品处理事件
async handleDelShop(e) {
    let { index, id } = e.currentTarget.dataset;
    let infoList = this.data.cartData.goods;
    infoList.splice(index, 1);
    this.setData({
      [infoList]: infoList,
    })
},

<block wx:for="{{infoList}}" wx:for-index="index" wx:key="id" wx:for-item="item">
  <movable-area >
    <movable-view bindtouchstart="touchStart" data-index="{{index}}" bindtouchend="touchend" class="item" x="{{shopInfo.x}}" y="{{shopInfo.y}}" damping="100" direction="horizontal" out-of-bounds="true" animation="true">
      <!-- 滑动删除左边显示信息的盒子 -->
      <view></view>
      <!-- 右边删除按钮的盒子 -->
      <view bindtap="handleDelShop">删除</view>
    </movable-view>
  </movable-area>
</block>
    
  // js 代码 data 里的变量：
data: {
    currentTouche: {
      x: 0,
      y: 0
    },
    offset: 20,
},
  
  // 删除商品处理事件
async handleDelShop(e) {
    let { index, id } = e.currentTarget.dataset;
    let infoList = this.data.cartData.goods;
    infoList.splice(index, 1);
    this.setData({
      [infoList]: infoList,
    })
},
  touchStart(e) {
    let { clientX, clientY } = e.changedTouches[0];
    let { index } = e.currentTarget.dataset;

    // 重置列表除当前操作的项之外的所有项在x方向的偏移量
    let newCartData = this.data.infoList.map((v, idx) => {
      if (index != idx) {
        v.x = '';
        v.y = '';
      }
      return v;
    })
    this.setData({
      infoList: newCartData
    })

    this.setData({
      currentTouche: {
        x: clientX,
        y: clientY
      }
    })
  },
  touchend(e) {
    let { clientX, clientY } = e.changedTouches[0];
    let { index } = e.currentTarget.dataset;
    // 判断是上下滑还是左右滑
    if (Math.abs(clientY - this.data.currentTouche.y) < Math.abs(clientX - this.data.currentTouche.x)) {  // 左右滑动
      // 判断是左滑还是右滑
      if (clientX >= this.data.currentTouche.x) {  // 右滑
        this.setData({
          [`infoList[${index}].x`]: 0
        })
      } else {   //左滑
        if (this.data.currentTouche.x - clientX >= this.data.offset) {
          this.setData({
            [`infoList[${index}].x`]: -rpxTopx(164)
          })
        } else {
          this.setData({
            [`infoList[${index}].x`]: 0
          })
        }
      }
    } else {  // 上下滑动
      // 重置数据
      this.setData({
        [`infoList[${index}].x`]: 0
      })
    }
    this.setData({
      currentTouche: {
        x: clientX,
        y: clientY
      }
    })
  },