【使用时可删除不必要的内容，我就是记录一下】
方法一：详细借鉴（app）：http://www.aliyue.net/10130.html
方法二：详细借鉴（微信小程序）：https://blog.csdn.net/weixin_41579185/article/details/117747252?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&utm_relevant_index=3
<template>
<view class="padding-sm">
<view class=" flex justify-between margin-bottom-sm">
<uni-easyinput style="flex:0.55" class="uni-mt-5" trim="all" placeholder="请输入内容"></uni-easyinput>
<uni-data-select style="flex:0.4" v-model="value" :localdata="range" placeholder="请选择类型"></uni-data-select>
</view>
<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 class="alarm_box1 flex flex-direction">
<view class="flex">
<image src="../../static/logo.png" mode="" class="alarm_iamge"></image>
<view class="flex flex-direction justify-between" style="flex: 1;">
<view class="flex justify-between align-end">
<span class="alarm_name">体检</span>
<span class="alarm_time">2024-05-07 16:00</span>
</view>
<view class="flex align-end">
<span class="alarm_phone margin-right-sm">类型：医疗</span>
<span class="alarm_phone">状态：即将来到</span>
</view>
<view class="flex align-end" style="width: 68vw;">
<view class="alarm_phone Personnel_description">描述：Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Molestias, beatae quasi quidem doloribus ducimus
possimus. Saepe consequatur, neque a molestias commodi deserunt sequi labore
tenetur omnis ipsam ipsum molestiae voluptates.</view>
</view>
</view>
</view>
</view>
</view>
<view class="remove" @click="delData(item)">删除</view>
<view class="edit" @click="editData(item)">编辑</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return { //列表数据，可根据自己的业务获取
//列表数据，可根据自己的业务获取
csListArrl: [{
name: '小A',
age: '18',
right: 0
}],
//左滑默认宽度
delBtnWidth: 80,
value: 0,
range: [{
value: 0,
text: "篮球"
},
{
value: 1,
text: "足球"
},
{
value: 2,
text: "游泳"
},
],
}
},
methods: {
/* input(e) {
console.log('输入内容：', e);
},
change(e) {
console.log("e:", e);
}, */ //开始触摸滑动
//开始触摸滑动
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*2);
} 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('用户点击取消');
}
}
});
}
}
}
</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;
}
.remove {
width: 60px;
right: -150px;
margin-left: -5%;
height: 100%;
background-color: red;
color: #FFFFFF;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
border-radius: 12rpx;
}
.edit {
height: 100%;
background-color: green;
color: white;
position: absolute;
top: 0;
width:60px;
right: -80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
border-radius: 12rpx;
}
</style>
标签：uniapp,right,console,log,左滑,index,csListArrl,currentTarget,按钮 From： https://www.cnblogs.com/le-cheng/p/18208527