寫一個微信小程序側滑刪除組件

時間 2019-12-10

標籤一個微信程序側滑刪除組件简体版

原文原文鏈接

背景

最近一直在斷斷續續作一個小程序的項目，看起來很小，但一直沒正經作太小程序，全部沒啥積累，什麼東西都要本身寫一遍。javascript

今天就遇到一個須要，刪除操做，按照微信的交互作一個。html

向左滑動，顯示刪除按鈕，而且，是動畫、過渡的打開，左滑一丟丟並不會打開，大概 10 像素的時候纔出發打開。左右滑動的時候，展開的程度和手指滑動貼合。最後手指滑動的方向決定打開仍是關閉，並不是起點與終點的方向。java

思路

既然要貼合手指的滑動，必然與 touchstart、touchmove、touchend 有關係。git

移動的效果，CSS 3 中的 2D 轉換 transform: translateX(0px) 蠻合適的，只須要一個值就能夠了。github

首先，在 touchstart 標記起點，在 touchmove 的時候不斷計算當前元素應該在哪一個位置，touchend 時把狀態歸位、斷定結果。小程序

在 touchmove 中不斷元素計算當前位置，手指起點、手指當前點能夠計算出當前移動的距離，再與元素的起點結合，能夠獲得當前元素的位置。但元素的位置時刻都是變化的，須要一個當前元素點的副本。元素的位置也會在一個範圍內移動，不能超過了範圍。微信小程序

在 touchend 中更新元素副本的數據，爲下次滑動作準備。數組

最後手指滑動的方向是比較細膩的斷定，須要結束滑動那一刻的狀態，因而，每次滑動的時候，記錄一組滑動的數組，取最後兩位的值作斷定。微信

<view class="sideslip-box" >
    <view class="sideslip-content" style="transform: translateX(-{{translateX}}px); transition: transform {{transitionTime / 1000}}s">
        <slot></slot>
    </view>
    <view class="sideslip-tool">
        <view class="btn danger" style="transform: translateX({{item.type === 'del' ? translateXDel : translateXEdit}}px); transition: transform {{transitionTime / 1000}}s">刪除</view>
    </view>
</view>

{
    data: {
        transitionTime: 0, // 過渡時間
        translateX: 0, // 當前元素位置
        __currentX:0, // 內部使用，當前元素位置的副本
        __lastXs: [], // 內部使用，記錄上一個x
        __startX: 0, // 內部使用，開始的X
    }
}

基本的雛形已經有了。ide

touchstart 中，標記起點 X，而且初始化 __lastXs，並添加第一個移動座標。

touchmove 裏面不斷向 __lastXs 添加值，經過起點的 X 和當前的 X 更新元素的位置，而且作臨界值的判斷。手指滑動的時候，跟隨狀態，因此並不須要過渡。

touchend 裏面作最有的斷定，例如方向、最後的元素位置、過渡時間等。

按照以上方式作，sideslip-content 這邊的交互已經完成了，接下來結合一些計算方式，把按鈕昨晚就行了。

剩下的能夠看看這個代碼，微信小程序側滑刪除、編輯