小程式左滑刪除功能
阿新 • • 發佈:2018-12-30
在使用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() } } }
引入即實現。完。