微信小程式仿微信， QQ 向左滑動刪除操作。

songzeng發表於2019-03-01
微信小程式

wechat-app-LeftSlide

微信小程式仿微信， QQ 向左滑動刪除操作。

專案地址，歡迎 star

github.com/songzeng201…

廢話不多說， 先看效果， 能滿足您的需求， 您在接著往下看。

微信小程式仿微信， QQ 向左滑動刪除操作。
本人比較懶， 刪除動作有點太生硬， 實在看不慣的同學可以加個動畫上去。
複製程式碼

OK 下面來看程式碼

首先是 wxml 裡面繫結事件

  <view class="item-wrapper">
   <view class="item-list" wx:for="{{itemData}}" wx:for-item="item" wx:for-index="index" wx:key="that">
       <view class="item-info" data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="left:{{item.left + `rpx`}}">
           <image class="info-img" src="{{item.img}}"></image>
           <view class="info-wrapper">
               <view class="info-desc">
                   <view class="name">{{item.name}}</view>
                   <view class="time">{{item.time}}</view>
               </view>
               <view class="info-content">{{item.info}}</view>
           </view>
       </view>
       <view class="item-oper">
           <view class="oper-delete" bindtap="itemDelete" data-index="{{index}}">刪除</view>
       </view>
   </view>
</view>
複製程式碼
 主要就是用的小程式的 touch 事件來進行處理
 
 樣式就不說了， 可以自己寫， 不想寫的同學也可以拿來直接用。
複製程式碼

然後就是事件的處理函式了

touchS: function (e) {  // touchstart
    let startX = App.Touches.getClientX(e)
    startX && this.setData({ startX })
  },
  touchM: function (e) {  // touchmove
    let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
    itemData && this.setData({ itemData })

  },
  touchE: function (e) {  // touchend
    const width = 150  // 定義操作列表寬度
    let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
    itemData && this.setData({ itemData })
  },
  itemDelete: function(e){  // itemDelete
    let itemData = App.Touches.deleteItem(e, this.data.itemData)
    itemData && this.setData({ itemData })
  },
  
複製程式碼
  事件函式主演也是 touch 的三個事件還有刪除事件， 每個事件的核心是更新資料， 也就是 setData()
複製程式碼

資料處理函式

資料處理的函式我單獨拿了出來， 這樣有利於複用。 放在 utils 資料夾下的 Touches.js 檔案裡面
複製程式碼
touchM(e, dataList, startX) {  // touchmove 過程中更新列表資料
        let list = this._resetData(dataList)
        list[this._getIndex(e)].left = this._getMoveX(e, startX)
        return list
    }

    touchE(e, dataList, startX, width) {  // touchend 更新列表資料
        let list = this._resetData(dataList)
        let disX = this._getEndX(e, startX)
        let left = 0

        if (disX < 0) {  // 判斷滑動方向， （向左滑動）
            // 滑動的距離大於刪除寬度的一半就顯示操作列表 否則不顯示
            Math.abs(disX) > width / 2 ? left = -width : left = 0
        } else {  // 向右滑動復位
            left = 0
        }

        list[this._getIndex(e)].left = left
        return list
    }

    deleteItem(e, dataList) {  // 刪除功能
        dataList.splice(this._getIndex(e), 1)
        return dataList
    }
複製程式碼
每個函式都有註釋說明， 相信都能看得懂， 就不多解釋了。 
  
有什麼更好的方法， 或建議歡迎提出。 感覺本輪子還可以歡迎 Star 。
複製程式碼

微信小程式仿微信， QQ 向左滑動刪除操作

微信小程式 自定義tabbar

相關文章