微信小程序 滑动删除列表项

效果图

滑动效果+删除

思路

• 每个列表项绑定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
    })
  },

源码

源码请移步github>>>>>>去看源码

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd