uni-app 实现列表左滑动编辑、删除按钮功能-小月博客

uni-app 实现列表左滑动编辑、删除按钮功能

近期在用uni-app写微信小程序，正好遇到一个需求，列表页左滑动实现编辑和删除功能，拿到需求后第一反应就是能不能砍掉不做?，显然这是不可能滴，所以那就坦然的接收吧。首先拿到需求后，分析需求需要用到什么，整个流程是怎么样子的。废话不多说咱们直接上代码吧。

需要实现的效果如下图【简略案例】

第一、分析需求

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

第二、实现功能

1、数据data 初始化

data() {
	return {
		//列表数据，可根据自己的业务获取
		csListArrl:[{
			name:'小A',
			age:'18',
			right: 0
		}],
		//左滑默认宽度
		delBtnWidth: 80
	}

2、视图层

<view class="main">
<view
    v-for="(item, index) in csListArrl"
    :key="index"
    :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 class="edit" @click="editData(item)">编 辑</view>
    </view>
</view>

3、CSS样式（这里可以根据自己的项目自行调整）

<style>
.main{
    width: 90%;
    height: auto;
    margin: 10px auto;
    overflow: hidden
}
.order-item {
    width: 100%;
    display: flex;
    position: relative;
    margin: 10px auto;
    align-items:right ;
    flex-direction: row;
}
.content{
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #C0C0C0;
    line-height: 100px;
    text-align: center;
}

.remove {
    margin-left:-5%;
    width: 80px;
    height: 100%;
    background-color: red;
    color: #FFFFFF;
    position: absolute;
    top: 0;
    right: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
.edit{
    width: 80px;
    height: 100%;
    background-color: green;
    color: white;
    position: absolute;
    top: 0;
    right: -160px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

</style>

4、功能实现JS 方法

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('用户点击取消');
				}
			}
		});
	}
}

完成以上代码流程就可以实现效果图的功能了。最近会持续分享uni-app相关的文章。更多uni-app学习资源如下

uni-app快速入门从零开始实现新闻资讯类跨端应用(含源码)完整无秘

纯正商业级应用-微信小程序开发实战-完整无秘

百度云盘直接下载，里面讲的更多的是一种学习方法，非常值得学习。