微信小程序列表中item左滑刪除功能

更新時(shí)間：2018年11月07日 14:52:13 作者：猿猿猿_yyy

這篇文章主要介紹了微信小程序列表中item左滑刪除功能，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

第一步：把想要的兩種樣式寫出來

1.正常顯示的樣式

此例子中只展示單個(gè)Item

css:

.box{
 height: 100%;
}
.item{
 position:relative;
 top: 0;
 width: 100%;
 height: 150rpx;
 border-bottom: #d9d9d9 solid 1rpx;
 padding: 0;
}
.item .content{
 background-color: #ffffff;
 height: 100%;
 position: relative;
 left: 0;
 width: 100%;
 transition: all 0.3s;
}
.item .del-button {
 position: absolute;
 right: -140rpx;
 width: 140rpx;
 height: 100%;
 background-color: #df3448;
 color: #fff;
 top: 0;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.3s;
 font-size: 24rpx;
}

xwml:

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content">顯示正常內(nèi)容</view>
  <view class="del-button">刪除</view>
 </view>
</view>

2.顯示刪除按鈕

在這里插入圖片描述

.item.active .content{
 left: -140rpx;
}
.item.active .del-button{
 right: 0;
}

同時(shí)在js中控制樣式是否active

data: {
  status:false //true為正常顯示，false為顯示刪除按鈕
 },

第二步：綁定事件

其實(shí)此時(shí)可以綁定bindtap事件，來切換active的狀態(tài)，點(diǎn)擊一下是“顯示正常內(nèi)容”，再點(diǎn)擊一下是“刪除”。然后，現(xiàn)在把點(diǎn)擊事件改成touch并向左move之后再觸發(fā)，就很好理解了。（樣式中，已經(jīng)提前寫好的transition: all 0.3s;就是為了使兩個(gè)狀態(tài)之間有個(gè)過渡）

微信小程序提供了兩個(gè)事件可以使用，一個(gè)是bindtouchstart，通過這個(gè)事件我們可以獲得用戶剛點(diǎn)擊（手指還未抬起）時(shí)的坐標(biāo)。

touchS(e) {
 // 獲得起始坐標(biāo)
 this.startX = e.touches[0].clientX;
 this.startY = e.touches[0].clientY;
},

還有一個(gè)是bindtouchmove，我們可以一直獲取當(dāng)前的坐標(biāo)（用戶手指一直在屏幕上滑動(dòng)時(shí)）。因此，我們只需要得到x軸上的移動(dòng)的前后坐標(biāo)相減是正數(shù)，就是向左移動(dòng)。

touchM(e) {
  // 獲得當(dāng)前坐標(biāo)
  this.currentX = e.touches[0].clientX;
  this.currentY = e.touches[0].clientY;
  const x = this.startX - this.currentX; //橫向移動(dòng)距離
  const y = Math.abs(this.startY - this.currentY); //縱向移動(dòng)距離，若向左移動(dòng)有點(diǎn)傾斜也可以接受
  if (x > 35 && y < 110) {
  //向左滑是顯示刪除
   this.setData({
    status: false
   })
  } else if (x < -35 && y < 110) {
  //向右滑
   this.setData({
    status: true
   })
  }
 },

然后綁定到Item上

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content" bindtouchstart="touchS" bindtouchmove="touchM">顯示正常內(nèi)容</view>
  <view class="del-button">刪除</view>
 </view>
</view>

最后再在刪除的view里bindtap一個(gè)刪除方法即可刪除。

以上是最簡版的效果，還需很多優(yōu)化要自行添加。

總結(jié)

以上所述是小編給大家介紹的微信小程序列表中item左滑刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: