小程序左滑删除

<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 });

}

});

}

 

})