微信小程式左滑刪除功能開發案例

Jnst發表於2018-11-11
微信小程式

直接進入正題，我們需要做的就是通過手指滑動列表項後，右側出現刪除；
比如說像這樣：
微信小程式：52魔都

向左邊滑動後出現如下的效果：
微信小程式：52魔都

開始擼程式碼～
假設我們有N個列表項來自一個陣列list，先確定基本的結構

<view class="list" wx:for="{{list}}" wx:key>
    <view class="item">
        <view class="wrap">{{item}}</view>
        <view class="delete"><text>刪除</text></view>
    </view>
</view>

在item中分別放入wrap作為顯示專案內容的容器，與delete刪除按鈕的容器。
當我們手指向左滑動wrap時，wrap容器向左移動；此時delete從wrap容器之後顯示出來；換句話說我們喜歡wrap容器蓋住delete，使wrap預設在delete上方。
沒錯，我們用樣式來實現效果。

.item{ position:relative; }
.wrap{ 
  position:absolute;z-index:2; top:0;left:0;
  backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}

好了，這些我們需要的核心樣式，為了wrap能100%蓋住delete，我們給到它寬高都是百分之百，並且填充背景顏色是必然的，至於要怎麼美化可自行新增需要的樣式。
基本的結構就到這裡了，接下來我們為wrap新增觸控事件；

<view class="wrap" 
  data-index="{{index}}" 
  bindtouchstart=`touchstart` 
  bindtouchmove=`touchmove` 
  bindtouchend=`touchend`
>{{item}}</view>

我們繫結了三個觸控事件，分別是，觸控開始，觸控時移動以及觸控結束。
同時有個wrap新增了data-index=”{{index}}” 這樣我們就可以確定當前觸控的列表項是哪一個。
接著我們來為他們新增對應的方法。

  touchstart:function(e){
    this.setData({
      index: e.currentTarget.dataset.index,
      Mstart: e.changedTouches[0].pageX
    });
  }

通過touchstart方法我們將當前觸發事件元素的索引儲存到index，並且獲得當前手指觸控的座標位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX

螢幕的左上角的座標為(0,0)，離左上角的距離越大pageX的值也越大。

下一步，當我們移動手指向左滑動時：

  touchmove: function (e) {
    //列表項陣列
    let list = this.data.list;
    //手指在螢幕上移動的距離
    //移動距離 = 觸控的位置 - 移動後的觸控位置
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    // 這裡就使用到我們之前記錄的索引index
    //比如你滑動第一個列表項index就是0，第二個列表項就是1，···
    //通過index我們就可以很準確的獲得當前觸發的元素，當然我們需要在事前為陣列list的每一項元素新增x屬性
    list[this.data.index].x = move > 0 ? -move : 0;
    this.setData({
      list: list
    });
  }

當移動後的觸控位置小於最初觸發的位置時，說明手指是向左滑動，因為pageX越小就越向螢幕邊緣靠近；這個時候move就是wrap容器需要向左移動的距離。
我們重寫list[this.data.index].x的值，並且將原有的list覆蓋，這樣我們在滑動的時候就能實時的看到元素跟隨手指移動的效果；
這個時候我們可以發現，我們一直往左邊移動，wrap元素就會被推到螢幕的邊緣；這很明顯不是我們想要的效果，我們希望滑動到一定距離後就停止滑動，於是我們為其新增最後一個方法；

  touchend: function (e) {
    let list = this.data.list;
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    list[this.data.index].x = move > 100 ? -180 : 0;
    this.setData({
      list: list
    });
  },

我們看到這個方法唯一的不同的地方是這一行

list[this.data.index].x = move > 100 ? -180 : 0

意思是當手指離開元素時，如果移動的距離大於100，那麼元素將自動向左移動到180的距離，如果小於100那麼元素將向右恢復。
接著我們給wrap元素新增style，這樣它就能獲得移動的距離x。
至於為什麼要移動距離要除以2，這個跟小程式使用rpx單位有關係；
之前我們寫100，-180是畫素px，需要換算成rpx；
微信小程式開發尺寸單位文件

裝置 rpx換算px (螢幕寬度/750) px換算rpx (750/螢幕寬度)
iPhone5,1rpx = 0.42px,1px = 2.34rpx
iPhone6,1rpx = 0.5px,1px = 2rpx
iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx

我們看到基本是2倍的比例；

<view class="wrap" 
  style="transform:translateX({{item.x/2}}px);"
  data-index="{{index}}" 
  bindtouchstart=`touchstart` 
  bindtouchmove=`touchmove` 
  bindtouchend=`touchend`
>{{item}}</view>

最後我們使用樣式為wrap元素新增過渡效果就基本完成了。

詳細案例請搜尋微信小程式：52魔都

原始碼地址：https://github.com/749264345/…

相關文章