小程序左滑删除
<view class="container">
<block wx:for="{{items}}" wx:key="">
<view class="table-cell-container">
<view class="table-content-container" style="left:-{{offsetRecord.index == index ? offsetRecord.offset : 0}}rpx;" bindtouchstart="onTableCellTouchStart" bindtouchmove="onTableCellTouchMove" bindtouchend="onTableCellTouchEnd" bindtouchcancel="onTableCellTouchEnd" data-index="{{index}}">
<!--可以在这里根据你的表格来进行UI布局,并可以绑定点击事件,切不可给"table-content-container"绑定点击事件-->
<view class="table-info-container">
<image src=""></image>
<text>{{item}}</text>
</view>
<view class="table-arrow-container"></view>
</view>
<view class="table-delete-container" bindtap="onDeleteButtonTapped" data-index="{{index}}">
<text>删除</text>
</view>
<view class="table-separator"></view>
</view>
</block>
</view>
//wxss
/* pages/index/index.wxss */
page {
width: 100%;
min-height: 100%;
}
.table-cell-container {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: column;
position: relative;
}
.table-content-container {
width: 100%;
height: calc(100% - 2rpx);
background-color: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 2;
overflow: hidden;
position: absolute;
top: 0rpx;
transition: left 0.5s;
}
.table-info-container image {
width: 40rpx;
height: 40rpx;
}
.table-arrow-container {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.table-arrow-container::before {
content: '>';
color: gray;
}
.table-delete-container {
width: 200rpx;
height: calc(100% - 2rpx);
position: absolute;
top: 0rpx;
right: 0rpx;
background-color: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.table-separator {
width: 100%;
height: 2rpx;
background-color: gray;
z-index: 3;
}
//js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
items: [],
offsetRecord: { 'index': -1, 'startX': 0, 'offset': 0 }, // 偏移记录
deleteButtonWidth: 200, // 删除按钮的宽度(rpx)
pixelScale: 1,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let res = wx.getSystemInfoSync();
this.data.pixelScale = (750/2) / (res.screenWidth/2);
// 模拟数据
let items = new Array(20).fill(0).map((v, idx) => `Label ${idx}`);
this.setData({ items: items });
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 表格cell触摸开始事件
*/
onTableCellTouchStart: function (event) {
if (event.changedTouches.length != 1) return;
let index = event.currentTarget.dataset.index;
let x = event.changedTouches[0].clientX;
this.setData({ offsetRecord: { 'index': index, 'startX': x, 'offset': 0 } });
},
/**
* 表格cell触摸移动事件
*/
onTableCellTouchMove: function (event) {
if (event.changedTouches.length != 1) return;
let index = event.currentTarget.dataset.index;
let record = this.data.offsetRecord;
if (index != Reflect.get(record, 'index')) {
return;
}
let clientX = event.changedTouches[0].clientX;
let startX = Reflect.get(record, 'startX');
let distance = Math.max(Math.min((startX - clientX) * this.data.pixelScale, this.data.deleteButtonWidth), 0);
Reflect.set(record, 'offset', distance);
this.setData({ offsetRecord: record });
},
/**
* 表格cell触摸结束事件
*/
onTableCellTouchEnd: function (event) {
if (event.changedTouches.length != 1) return;
let index = event.currentTarget.dataset.index;
let record = this.data.offsetRecord;
if (index == Reflect.get(record, 'index')) {
let offset = Reflect.get(record, 'offset');
if (offset >= this.data.deleteButtonWidth / 2) {
Reflect.set(record, 'offset', this.data.deleteButtonWidth);
} else {
record = null;
}
this.setData({ offsetRecord: record });
}
},
/**
* 表格cell删除按钮点击事件
*/
onDeleteButtonTapped: function (event) {
let index = event.currentTarget.dataset.index;
wx.showModal({
content: `确定要删除第${index}行表格吗?`,
showCancel: true,
success: (res) => {
if (!res.confirm) return;
let items = Reflect.get(this.data, 'items');
items.splice(index, 1);
this.setData({ items: items, offsetRecord: null });
}
});
}
})