1. 程式人生 > >小程式左滑刪除功能

小程式左滑刪除功能

在使用wepy框架中,對左滑刪除功能做解釋,通過touch事件的起止,完成事件的繫結和資料重新整理,來達到效果,大致程式碼如下:

wxml
<view class="touch-item" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" data-index="{{idx}}" style="{{value.position}}" data-channel="{{index}}"></view>

script中
//滑動刪除操作

touchS(e) {
  if(e.touches.length==1){
    //設定觸控起始點水平方向位置
    this.startX = e.touches[0].clientX
  }
}

touchM(e) {
  if(e.touches.length==1){
    //手指移動時水平方向位置
    let moveX = e.touches[0].clientX
    //手指起始點位置與移動期間的差值
    let disX = this.startX - moveX
    let delBtnWidth = this.delBtnWidth
    let position = ""
    if(disX == 0 || disX < 0){//如果移動距離小於等於0,文字層位置不變
      position = "margin-left: 0rpx"
    }else if(disX > 0 ){//移動距離大於0,文字層margin-left值等於手指移動距離
      position = "margin-left:-"+disX+"rpx"
      if(disX>=delBtnWidth){
        //控制手指移動距離最大值為刪除按鈕的寬度
        position = "margin-left:-"+delBtnWidth+"rpx"
      }
    }
    //獲取手指觸控的是哪一項
    let index = e.currentTarget.dataset.index
    //判斷頻道
    let channel = e.currentTarget.dataset.channel
    if(index >= 0){
      //根據資料型別更新狀態
      this.cartInfo[channel].shopcartList[index].position = position 
      this.$apply()
    }
  }
}
//用於滑動距離不夠時,恢復原來狀態
touchE(e) {
  if(e.changedTouches.length==1){
    //手指移動結束後水平位置
    let endX = e.changedTouches[0].clientX
    //觸控開始與結束,手指移動的距離
    let disX = this.startX - endX
    let delBtnWidth = this.delBtnWidth
    //如果距離小於刪除按鈕的1/3,不顯示刪除按鈕
    let position = disX > delBtnWidth/3 ? "margin-left:-"+delBtnWidth+"rpx":"margin-left:0rpx"
    //獲取手指觸控的是哪一項
    let index = e.currentTarget.dataset.index
    //判斷頻道
    let channel = e.currentTarget.dataset.channel
    if(index >= 0){
      //更新狀態
      this.cartInfo[channel].shopcartList[index].position = position 
      this.$apply()
    }
  }
}

引入即實現。完。