微信小程序-左滑刪除效果

首先把布局寫好，根據(jù)自己的需求編寫，html代碼部分：

<view class="container">

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">

<view class="content">{{item.content}}</view>

<view class="del" catchtap="del" data-index="{{index}}">刪除</view>

</view>

</view>

CSS代碼部分：

page {background-color: white;}

.container {min-height: 100%;padding: 20rpx 0rpx;} 

.touch-item {font-size: 14px;display: flex;justify-content: space-between;border-bottom:1px solid #ccc;width: 100%;overflow: hidden}

.content {

width: 100%;

padding: 10px;

line-height: 22px;

margin-right:0;

-webkit-transition: all 0.4s;

transition: all 0.4s;

-webkit-transform: translateX(90px);

transform: translateX(90px);

margin-left: -90px

}

.del {

background-color: orangered;

width: 90px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: #fff;

-webkit-transform: translateX(90px);

transform: translateX(90px);

-webkit-transition: all 0.4s;

transition: all 0.4s;

}

.touch-move-active .content,

.touch-move-active .del {-webkit-transform: translateX(0);transform: translateX(0);}

js代碼部分：

觸發(fā)滑動(dòng)事件，需要計(jì)算的哦，代碼有注釋，小哥哥小姐姐們慢慢欣賞拉

Page({

data: {

items: [],

startX: 0, //開始坐標(biāo)

startY: 0

},

onLoad: function (e) {

var that = this;

//common是自己寫的公共JS方法，可忽略

common.sys_main(app, that, e);

for (var i = 0; i < 10; i++) {

this.data.items.push({

content: i + " 向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦",

isTouchMove: false //默認(rèn)隱藏刪除

})

}

this.setData({

items: this.data.items

});

}

,

//手指觸摸動(dòng)作開始 記錄起點(diǎn)X坐標(biāo)

touchstart: function (e) {

//開始觸摸時(shí) 重置所有刪除

this.data.items.forEach(function (v, i) {

if (v.isTouchMove)//只操作為true的

v.isTouchMove = false;

})

this.setData({

startX: e.changedTouches[0].clientX,

startY: e.changedTouches[0].clientY,

items: this.data.items

})

},

//滑動(dòng)事件處理

touchmove: function (e) {

var that = this;

index = e.currentTarget.dataset.index;//當(dāng)前索引

startX = that.data.startX;//開始X坐標(biāo)

startY = that.data.startY;//開始Y坐標(biāo)

touchMoveX = e.changedTouches[0].clientX;//滑動(dòng)變化坐標(biāo)

touchMoveY = e.changedTouches[0].clientY;//滑動(dòng)變化坐標(biāo)

//獲取滑動(dòng)角度

angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

that.data.items.forEach(function (v, i) {

v.isTouchMove = false

//滑動(dòng)超過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({

items: that.data.items

})

},

/**

* 計(jì)算滑動(dòng)角度

* @param {Object} start 起點(diǎn)坐標(biāo)

* @param {Object} end 終點(diǎn)坐標(biāo)

*/

angle: function (start, end) {

var _X = end.X - start.X,

_Y = end.Y - start.Y

//返回角度 /Math.atan()返回?cái)?shù)字的反正切值

return 360 * Math.atan(_Y / _X) / (2 * Math.PI);

},

//刪除事件

del: function (e) {

this.data.items.splice(e.currentTarget.dataset.index, 1)

this.setData({

items: this.data.items

})

}

})