效果图:
<template>
<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>
</view>
</template>
<script>
export default {
data() {
return {
//列表数据,可根据自己的业务获取
csListArrl: [{
name: '小A',
age: '18',
right: 0
},
{
name: '小A',
age: '18',
right: 0
},
{
name: '小A',
age: '18',
right: 0
},
{
name: '小A',
age: '18',
right: 0
}],
//左滑默认宽度
delBtnWidth: 80
}
},
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('用户点击取消');
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
.main {
width: 100%;
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>
效果一:进入方法一
转载:原文更详细
原文链接:http://www.aliyue.net/10130.html