实现微信聊天列表左滑删除

230 阅读1分钟

movable-area

可移动区域

movable-view

可移动容器,movable-view必须在movable-area中使用,并且必须是直接子节点,否则不能使用。 属性:direction设置可移动方向(all、vertical、horizontal、none),为none时不可移动。scale是否支持双指缩放(生效区域在movable-view)。

举个例子

touchStart(e) {
  let startX = e.changedTouches[0].clientX
  let startY = e.changedTouches[0].clientY
  this.data.items.forEach((item, index)=> {
    if(item.isTouchMove) {
      item.isTouchMove = false
    }
  })
  this.setData({
    startX: startX,
    startY: startY,
    items: this.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
      }
    })
    this.setData({
      items:this.data.items
    })
},
del(e) {
    let index= e.currentTarget.dataset.index
    this.data.items.splice(index, 1)
    this.setData({
      items: this.data.items
    })
}