微信小程序左右滑動刪除事件詳解

更新時間：2022年06月30日 15:47:25 作者：呆鳥慢飛

這篇文章主要為大家詳細(xì)介紹了微信小程序左右滑動刪除事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序左右滑動刪除事件，供大家參考，具體內(nèi)容如下

效果圖

上代碼

<scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" >
? ? <view>
? ? ? ? <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index" >
? ? ? ? ? ? <view class="list {{ item.isTouchMove ? 'touch-move-active' : '' }}" ? ?bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{ index }}" >
? ? ? ? ? ? ? ? <view class="txt">{{ item.id }} -- {{ item.title }}</view>
? ? ? ? ? ? ? ? <view class="del" bindtap="delList" data-index="{{ index }}" > 刪除 </view>
? ? ? ? ? ? </view>
? ? ? ? </block>
? ? </view>
</scroll-view>

/* 列表 */
.list {
? ? display: flex;
? ? justify-content: space-between;
? ? width: 100%;
? ? height: 100rpx;
? ? line-height: 100rpx;
? ? overflow: hidden;
? ? text-align: center;
? ? border-bottom: 1px solid #cccccc;
}
/* 列表內(nèi)容 */
.list .txt {
? ? flex-grow: 1;
? ? width: 100%;
? ? margin-left: -150rpx;
? ? background-color: #fff;
}
/* 刪除按鈕 */
.list .del {
? ? flex-grow: 0;
? ? width: 150rpx;
? ? color: #fff;
? ? background-color: #fe3e2f;
}

.list .txt, .list .del {
? ? transform: translateX(150rpx);
? ? transition: all 0.4s;
}
.touch-move-active .txt,.touch-move-active .del {
? ? -webkit-transform: translateX(0);
? ? transform: translateX(0);
}

js:

Page({
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? list: [
? ? ? ? ? ? { id: "0001", title: "商品1" },
? ? ? ? ? ? { id: "0002", title: "商品2" },
? ? ? ? ? ? // ..........
? ? ? ? ],
? ? ? ? scrollHeight: 0, ?// scroll-view高度
? ? ? ? startX: 0, ? ? ? ?// 開始X坐標(biāo)
? ? ? ? startY: 0, ? ? ? ?// 開始Y坐標(biāo)

? ? },

? ? // 手指觸摸動作開始
? ? touchStart: function(e){
? ? ? ? let that = this;
? ? ? ? //開始觸摸時 重置所有刪除
? ? ? ? that.data.list.forEach(function (v, i) {
? ? ? ? ? ? if (v.isTouchMove) v.isTouchMove = false; // 只操作為true的
? ? ? ? })
? ? ? ? // 記錄手指觸摸開始坐標(biāo)
? ? ? ? that.setData({
? ? ? ? ? ? startX: e.changedTouches[0].clientX, ?// 開始X坐標(biāo)
? ? ? ? ? ? startY: e.changedTouches[0].clientY, ?// 開始Y坐標(biāo)
? ? ? ? ? ? list: that.data.list
? ? ? ? })
? ? },

? ? // 手指觸摸后移動
? ? touchMove: function(e){
? ? ? ? let that = this,
? ? ? ? ? ? index = e.currentTarget.dataset.index, ? ?// 當(dāng)前下標(biāo)
? ? ? ? ? ? startX = that.data.startX, ? ? ? ? ? ? ? ?// 開始X坐標(biāo)
? ? ? ? ? ? startY = that.data.startY, ? ? ? ? ? ? ? ?// 開始Y坐標(biāo)
? ? ? ? ? ? touchMoveX = e.changedTouches[0].clientX, // 滑動變化坐標(biāo)
? ? ? ? ? ? touchMoveY = e.changedTouches[0].clientY, // 滑動變化坐標(biāo)
? ? ? ? ? ? // 獲取滑動角度
? ? ? ? ? ? angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
　　　　　// 判斷滑動角度
? ? ? ? that.data.list.forEach(function (v, i) {
? ? ? ? ? ? v.isTouchMove = false
? ? ? ? ? ? // 滑動超過30度角 return
? ? ? ? ? ? if (Math.abs(angle) > 30) return;
? ? ? ? ? ? if (i == index) {
? ? ? ? ? ? ? ? // 右滑
? ? ? ? ? ? ? ? if (touchMoveX > startX)?
? ? ? ? ? ? ? ? ? ? v.isTouchMove = false
? ? ? ? ? ? ? ? // 左滑
? ? ? ? ? ? ? ? else?
? ? ? ? ? ? ? ? ? ? v.isTouchMove = true
? ? ? ? ? ? }
? ? ? })
? ? ? // 更新數(shù)據(jù)
? ? ? that.setData({
? ? ? ? ? list: that.data.list
? ? ? })
? ? },

? ? // 計(jì)算滑動角度
? ? angle: function (start, end) {
? ? ? ? let that = this,
? ? ? ? ? ? _X = end.X - start.X,
? ? ? ? ? ? _Y = end.Y - start.Y;
? ? ? ? // 返回角度 /Math.atan()返回?cái)?shù)字的反正切值
? ? ? ? return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
? ? },

? ? // 刪除
? ? delList: function(e){
? ? ? ? let that = this,
? ? ? ? ? ? index = e.currentTarget.dataset.index; ?// 當(dāng)前下標(biāo)
　　　　　// 切割當(dāng)前下標(biāo)元素，更新數(shù)據(jù)
? ? ? ? that.data.list.splice(index, 1);?
? ? ? ? that.setData({
? ? ? ? ? ? list: that.data.list
? ? ? ? })
? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ? ?*/
? ? onLoad: function (options) {
? ? ? ? let that = this;
? ? ? ? // 動態(tài)獲取屏幕高度
? ? ? ? that.setData({
? ? ? ? ? ? scrollHeight: wx.getSystemInfoSync().screenHeight
? ? ? ? })
? ? },
})

這是左滑動刪除，如需要右滑動刪除在js頁面調(diào)整一下就好。

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

您可能感興趣的文章: