直接進(jìn)入正題，我們需要做的就是通過(guò)手指滑動(dòng)列表項(xiàng)后，右側(cè)出現(xiàn)刪除；

比如說(shuō)像這樣：

向左邊滑動(dòng)后出現(xiàn)如下的效果：

開始擼代碼～

假設(shè)我們有N個(gè)列表項(xiàng)來(lái)自一個(gè)數(shù)組list，先確定基本的結(jié)構(gòu)

<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作為顯示項(xiàng)目?jī)?nèi)容的容器，與delete刪除按鈕的容器。

當(dāng)我們手指向左滑動(dòng)wrap時(shí)，wrap容器向左移動(dòng)；此時(shí)delete從wrap容器之后顯示出來(lái)；換句話說(shuō)我們喜歡wrap容器蓋住delete，使wrap默認(rèn)在delete上方。

沒錯(cuò)，我們用樣式來(lái)實(shí)現(xiàn)效果。

.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，我們給到它寬高都是百分之百，并且填充背景顏色是必然的，至于要怎么美化可自行添加需要的樣式。

基本的結(jié)構(gòu)就到這里了，接下來(lái)我們?yōu)閣rap添加觸摸事件；

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

我們綁定了三個(gè)觸摸事件，分別是，觸摸開始，觸摸時(shí)移動(dòng)以及觸摸結(jié)束。

同時(shí)有個(gè)wrap添加了data-index="{{index}}" 這樣我們就可以確定當(dāng)前觸摸的列表項(xiàng)是哪一個(gè)。

接著我們來(lái)為他們添加對(duì)應(yīng)的方法。

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

通過(guò)touchstart方法我們將當(dāng)前觸發(fā)事件元素的索引保存到index，并且獲得當(dāng)前手指觸摸的坐標(biāo)位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX

屏幕的左上角的坐標(biāo)為(0,0)，離左上角的距離越大pageX的值也越大。

下一步，當(dāng)我們移動(dòng)手指向左滑動(dòng)時(shí)：

 touchmove: function (e) {
  //列表項(xiàng)數(shù)組
  let list = this.data.list;
  //手指在屏幕上移動(dòng)的距離
  //移動(dòng)距離 = 觸摸的位置 - 移動(dòng)后的觸摸位置
  let move = this.data.Mstart - e.changedTouches[0].pageX;
  // 這里就使用到我們之前記錄的索引index
  //比如你滑動(dòng)第一個(gè)列表項(xiàng)index就是0，第二個(gè)列表項(xiàng)就是1，···
  //通過(guò)index我們就可以很準(zhǔn)確的獲得當(dāng)前觸發(fā)的元素，當(dāng)然我們需要在事前為數(shù)組list的每一項(xiàng)元素添加x屬性
  list[this.data.index].x = move > 0 ? -move : 0;
  this.setData({
   list: list
  });
 }

當(dāng)移動(dòng)后的觸摸位置小于最初觸發(fā)的位置時(shí)，說(shuō)明手指是向左滑動(dòng)，因?yàn)閜ageX越小就越向屏幕邊緣靠近；這個(gè)時(shí)候move就是wrap容器需要向左移動(dòng)的距離。

我們重寫list[this.data.index].x的值，并且將原有的list覆蓋，這樣我們?cè)诨瑒?dòng)的時(shí)候就能實(shí)時(shí)的看到元素跟隨手指移動(dòng)的效果；
這個(gè)時(shí)候我們可以發(fā)現(xiàn)，我們一直往左邊移動(dòng)，wrap元素就會(huì)被推到屏幕的邊緣；這很明顯不是我們想要的效果，我們希望滑動(dòng)到一定距離后就停止滑動(dòng)，于是我們?yōu)槠涮砑幼詈笠粋€(gè)方法；

 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
  });
 },

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

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

意思是當(dāng)手指離開元素時(shí)，如果移動(dòng)的距離大于100，那么元素將自動(dòng)向左移動(dòng)到180的距離，如果小于100那么元素將向右恢復(fù)。

接著我們給wrap元素添加style，這樣它就能獲得移動(dòng)的距離x。

至于為什么要移動(dòng)距離要除以2，這個(gè)跟小程序使用rpx單位有關(guān)系；

之前我們寫100，-180是像素px，需要換算成rpx；

微信小程序開發(fā)尺寸單位文檔

設(shè)備 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元素添加過(guò)渡效果就基本完成了。

源碼地址：https://github.com/749264345/wechat-weapp-map

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論