微信小程序左滑刪除

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key>
　　<view class="content">
　　　　<view style="{{item.txtStyle}}" class='item' data-index='{{index}}' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchE">
　　　　<view class='title'>{{item.title}}</view>
　　　　<text>{{item.create_time}}</text>
　　</view>
</view>

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

 

 

.touch-item {
　　display: flex;
　　justify-content: space-between;
　　width: 100%;
　　overflow: hidden;
　　margin-bottom: 10rpx;
　　background: #f5f5f5;
　　height: 216rpx;
}

.content {
　　width: 100%;
　　margin-right: 0;
　　-webkit-transition: all 0.4s;
　　transition: all 0.4s;
　　-webkit-transform: translateX(90px);
　　transform: translateX(90px);
　　margin-left: -90px;
}

.del {
　　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;
　　font-size: 35rpx;
}

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

 

 

// pages/touch/touch.js
Page({

/**
* 頁面的初始數據
*/
data: {
startX: 0, //開始坐標
startY: 0,
page: 1,
list:[
{
id:0,
title:'標題1',
create_time:'2019-09-06'
}, {
id: 1,
title: '標題2',
create_time: '2019-09-06'
}, {
id: 2,
title: '標題3',
create_time: '2019-09-06'
},
]
},
touchE: function (e) {
// console.log(e);
var that = this
if (e.changedTouches.length == 1) {
//手指移動結束后觸摸點位置的X坐標
var endX = e.changedTouches[0].clientX;
//觸摸開始與結束，手指移動的距離
var disX = that.data.startX - endX;
var delBtnWidth = that.data.delBtnWidth;
//如果距離小於刪除按鈕的1/2，不顯示刪除按鈕
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";

//獲取手指觸摸的是哪一項
var index = e.currentTarget.dataset.index;
var list = that.data.list;
list[index].txtStyle = txtStyle;
//更新列表的狀態
that.setData({
list: list
});
}
},
//手指觸摸動作開始 記錄起點X坐標
touchstart: function (e) {
//開始觸摸時 重置所有刪除
this.data.list.forEach(function (v, i) {
if (v.isTouchMove) //只操作為true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
list: this.data.list
})
},
//滑動事件處理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index, //當前索引
startX = that.data.startX, //開始X坐標
startY = that.data.startY, //開始Y坐標
touchMoveX = e.changedTouches[0].clientX, //滑動變化坐標
touchMoveY = e.changedTouches[0].clientY, //滑動變化坐標
//獲取滑動角度
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
}
})
//更新數據
that.setData({
list: that.data.list
})
},
/**
* 計算滑動角度
* @param {Object} start 起點坐標
* @param {Object} end 終點坐標
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回數字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},

/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {

},

/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {

},

/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {

}
})