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

ゝ一世哀愁。 2022-12-14 04:00 1119阅读 0赞

首先了解一下实现功能的几个重要事件：  
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样式(此处仅仅是左滑功能用到的样式，列表其他样式请根据自己的系统风格自行调整)**

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

**五、效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center 2]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ab1f6f5fca1e4575a1b8260eb5f1bf08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/28f4a7be6b574fbcbf06c2d0993fe8c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODY0MjEw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/31db6604260d42478a8e8170b0b1ec47.png