SwipeCell 滑动单元格实践

实现的功能
1.左滑删除

<van-swipe-cell :right-width="110">
	<li slot="default">
		<img src="@img/home/6.png" alt="">
		<div class="text">
		<h2 class="toe">蛋糕店策划h2>
		<p class="toe">传统行业面临传承求新的阶段p>
		div>
	li>
	<div class="delete-button" slot="right" @click="Close">删除div>
van-swipe-cell>

<script>
methods:{
	//删除
	Close(){
		this.$toast.success({
			message: '删除成功',
			duration: 2000,
			forbidClick:true,
		});
		setTimeout(() => {
			this.list.splice(index,1);//从列表删除该数据
		}, 2000)
	},
}
script>

SwipeCell 滑动单元格实践_第1张图片
SwipeCell 滑动单元格实践_第2张图片

你可能感兴趣的:(vant,vue)