最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:04:14
文檔

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

微信小程序列表中item左滑刪除功能:第一步:把想要的兩種樣式寫出來 1.正常顯示的樣式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; }
推薦度:
導(dǎo)讀微信小程序列表中item左滑刪除功能:第一步:把想要的兩種樣式寫出來 1.正常顯示的樣式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; }

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

1.正常顯示的樣式


此例子中只展示單個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;
}

同時在js中控制樣式是否active

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

第二步:綁定事件

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

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

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

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

touchM(e) {
 // 獲得當(dāng)前坐標(biāo)
 this.currentX = e.touches[0].clientX;
 this.currentY = e.touches[0].clientY;
 const x = this.startX - this.currentX; //橫向移動距離
 const y = Math.abs(this.startY - this.currentY); //縱向移動距離,若向左移動有點(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一個刪除方法即可刪除。

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

總結(jié)

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

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

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

微信小程序列表中item左滑刪除功能:第一步:把想要的兩種樣式寫出來 1.正常顯示的樣式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; }
推薦度:
標(biāo)簽: 刪除 微信小程序 列表
  • 熱門焦點(diǎn)
專題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!