uniapp实现滑动删除

David的学习之路

已于 2022-07-04 11:26:36 修改

阅读量1.1k

点赞数 1

文章标签：前端 vue.js

于 2022-06-24 11:21:59 首次发布

本文链接：https://blog.youkuaiyun.com/toutudayuan/article/details/125442070

版权

<template>
	<view>
		<view class="content">
			<view v-for="(item,index) in list">
				<movable-area class="m-area" v-if="item.choose_index==0">
				  <movable-view class="m-view" direction="horizontal" @change="onchange()" :x="c_index == index?juli:0">
				    <view class="left" @click="moveMview($event,index)">
						<image src="../../static/images/my/fankuimessage.png"></image>
						<view class="fankuicontent">
							<view class="text">
								{{item.content}}
							</view>
							<view class="date">
								{{item.date}}
							</view>
						</view>
					</view>
				    <view class="right">
				      <view class="delete" @click="shanchu(index)">删除</view>
				    </view>
				  </movable-view>
				</movable-area>
			</view>
		</view>
	</view>
</template>

page{
	background-color: #f6f6f6;
}
.content{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 20upx;
}
.m-area{
	background-color: #fff;
	width: 750upx;
	height: 150upx;
}
.m-view{
	width: 884upx;
	height: 150upx;
	display: flex;
}
.left{
	width: 100%;
	display: flex;
	padding: 30upx 39upx 34upx 40upx;
	box-sizing: border-box;
}
.left>image{
	width: 95upx;
	height: 85upx;
}
.fankuicontent{
	display: flex;
	width: 100%;
	flex-direction: column;
	margin-left: 21upx;
}
.text{
	font-size: 25upx;
	font-weight: 500;
	color: #333333;
}
.date{
	font-size: 20upx;
	margin-top: 10upx;
	color: #8C8C8C;
}
.right{
	display: flex;
}
.delete{
	background-color: #F01D1D;
	color: #fff;
	width: 134upx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	font-weight: bold;
}

<script>
	export default {
		data() {
			return {
				list:[
					{
						content:'有人举报偷盗我的视频，希望能查一下，账号是15788880000',date:'08:56',choose_index:0,x:0
					},
					{
						content:'我的提现失败了，是什么原因呢，请帮我查看一下， 联系方式：15788880000',date:'08:56',choose_index:0,x:0
					},
					{
						content:'我的提现失败了，是什么原因呢，请帮我查看一下， 联系方式：15788880000',date:'08:56',choose_index:0,x:0
					}
				],
				juli:0,
				c_index:null
			}
		},
		methods: {
			shanchu(index){
				this.list[index].choose_index=1;
			},
			moveMview(e,index){
				var that = this;
				if(this.list[index].x == 0){
					this.list[index].x = 1;
					that.juli = -100;
				}else{
					this.list[index].x = 0;
					that.juli = 0;
				}
				this.c_index = index;

			},
			onchange(e){
				console.log('e',e);
			}
		}
	}
</script>