uni-app 实现列表左滑删除按钮

首先了解一下实现功能的几个重要事件：
1、touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2、touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3、touchend事件：当手指从屏幕上离开的时候触发。
4、touchcancel事件：当系统停止跟踪触摸的时候触发。

接下来实现功能：

一、初始化数据

data{
	return{
		//列表数据（根据自己的业务获取）
		csListArrl:[],
		//左滑默认宽度
		delBtnWidth: 160
	}
}

二、视图层

<view :data-index="index"  class="order-item" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'">
	<view  class="content">列表展示内容</view>
	<view class="remove" @click="delData(item)">注 销</view>
</view>

三、Css样式(此处仅仅是左滑功能用到的样式，列表其他样式请根据自己的系统风格自行调整)

<style>
	.order-item {
	    width: 100%;
	    display: flex;
	    position: relative;
	}
	
	.remove {
	    width: 80px;
	    height: 100%;
	    background-color: red;
	    color: white;
	    position: absolute;
	    top: 0;
	    right: -165px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		font-size: 16px;
	}
</style>

四、JS事件实现方法

//开始触摸滑动
drawStart(e) {
	console.log("开始触发");
	var touch = e.touches[0];
	this.startX = touch.clientX;
},
//触摸滑动
drawMove(e) {
	console.log("滑动");
	for (var index in this.csListArrl) {
		this.$set(this.csListArrl[index],'right',0);
	}
	var touch = e.touches[0];
	var item = this.csListArrl[e.currentTarget.dataset.index];
	var disX = this.startX - touch.clientX;
	if (disX >= 20) {
		if (disX > this.delBtnWidth) {
			disX = this.delBtnWidth;
		}
	this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',disX);
	} else {
		this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',0);
	}
},
//触摸滑动结束
drawEnd(e) {
	console.log("滑动结束");
	var item = this.csListArrl[e.currentTarget.dataset.index];
	if (item.right >= this.delBtnWidth / 2) {
		this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',this.delBtnWidth);
	} else {
		this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',0);
	}
},
//删除方法
delData(item){
	console.log("删除")
	uni.showModal({
	    title: '提示',
	    content: "确认注销该人员？",
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}

五、效果图

到此功能已实现，文章内容仅供参考，仅代表个人见解，用于记录学习，如有疑惑请留言，谢谢！