uniapp列表左滑编辑删除

template

<template>
    <view class="page">
		<view class="main">
		<view class="item" 
		    v-for="(item, index) in csListArrl"
		    :key="index"
		    :data-index="index" 
		    @touchstart="drawStart" 
		    @touchmove="drawMove" 
		    @touchend="drawEnd" 
		    :style="'right:'+item.right+'px'">
		        <view class="title">{{item.name}}</view>
		        
		        <view class="model edit" @click="editData(item)">编 辑</view>
				<view class="model remove" @click="delData(item)">删 除</view>
		    </view>
		</view>
    </view>
</template>

script

export default {
	data() {
		return {
			csListArrl:[
				{
					name:'AAAAAAAAAAA',
					right: 0
				},
				{
					name:'BBBBBBBBBBBB',
					right: 0
				},
				{
					name:'CCCCCCCCCCCC',
					right: 0
				}
			],
			delBtnWidth: 140
		}
	},
	methods: {
		//开始触摸滑动
		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('用户点击取消');
					}
				}
			});
		},
		editData(item){
			uni.showModal({
				title: '提示',
				content: "确认编辑？",
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
	
}

style

.main{
    height: auto;
    margin: 10px auto;
    padding: 0 34upx;
}
.item {
	background: #fff;
	border-radius: 10upx 10upx 10upx;
	box-shadow:0px 1px 4px #C0C0C0;
	display: flex;
	justify-content: space-between;
	font-size: 26upx;
	color: #333;
	margin-bottom: 20upx;
	padding: 24upx 0 25upx 0;
	position: relative;
}
.title{
	padding-left: 20upx;
}
.model{
    position: absolute;
    top: 0;
    right: -124upx;
    padding: 28upx 26upx;
    border-radius: 10upx;
}
.remove {
    margin-left:-5%;
    position: absolute;
    top: 0;
    right: -70px;
    color: #ff4949;
    background: #ffeded;
    border-color: 2upx solid #ffb6b6;
}
.edit{
    position: absolute;
    top: 0;
    right: -140px;
    color: #13ce66;
    background: #e7faf0;
    border-color: 2upx solid #a1ebc2;
}