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快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
百度云盘直接下载，里面讲的更多的是一种学习方法，非常值得学习。
