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

直接進入正題，咱們須要作的就是經過手指滑動列表項後，右側出現刪除； 好比說像這樣：

向左邊滑動後出現以下的效果：

開始擼代碼～ 假設咱們有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魔都

源碼地址：github.com/749264345/w…