小程序基于vue实现简单的左滑删除

小程序如何实现简单的左滑删除

基于vue的语法

• touchStart
• touchMove
• touchEnd
  
  这是最开始的效果，我们需要把删除按钮隐藏起来

z-index: -1

然后将item的z-index设置为2

z-index: 1

隐藏完之后，写滑动的函数，首先是监听起始位置

touchStart:function(e) {
//如果不知道为什么是这样的，可以console.log(e)
//里面你可以看到关于它的所有东西
	this.touchStartP = e.touches[0].pageX;
},

然后我们计算滑动距离

touchMove:function(e) {
//计算滑动距离
	this.moveLength = this.touchStartP - e.touches[0].pageX;
},

touchEnd:function(e) {
//判断滑动距离
	if (this.moveLength > 60) {
		this.isDelete = true
		this.currentIndex = e.currentTarget.dataset.target;
	}
	else if (this.moveLength < -60) {
		this.isDelete = false;
		this.currentIndex = null;
	}
	//重置函数 因为上一次的值已经被记录了
	//所以要将其重置 不影响下次操作
	this.resetMove();
},

重置函数

resetMove:function() {
	this.touchStartP = 0;
	this.moveLength = 0;
},

绑定showDelete类，在滑动的时候增加一个动画

.showDelete {
		animation-name: move;
		animation-duration: .6s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
}
	@keyframes move{
		to{
			transform: translateX(-160upx);
			transition: all .6s linear;
		}
	}

至此，滑动删除就完成了，不过有一个缺陷就是，取消删除的时候回弹的效果有点生硬
个人实现方法，不喜勿碰，有更好的方法，欢迎互相交流
完整代码（删除函数自己写就可以）

<template>
	<view class="container">
		<view class="slide-item" v-for="(slideItem,index) in slideList" :key="index">
			<!-- 主体内容 -->
			<view class="item" :class="{showDelete: isDelete && currentIndex == index,}" @touchstart="touchStart" 
					@touchmove="touchMove" @touchend="touchEnd" :data-target="index">
				<text>{{slideItem.name}}</text>
			</view>
			<!-- 删除按钮 -->
			<view class="delete-btn">
				<view class="btn">
					<text class="cuIcon-delete text-white"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDelete: false,
				touchStartP: 0,
				moveLength: 0,
				currentIndex: null,
				slideList: [
					{
						name: 'item1'
					},
					{
						name: 'item2'
					},
					{
						name: 'item3'
					},
					{
						name: 'item4'
					},
					{
						name: 'item5'
					},
					{
						name: 'item6'
					}
				]
			}
		},
		methods: {
			resetMove:function() {
				this.touchStartP = 0;
				this.moveLength = 0;
			},
			touchStart:function(e) {
				this.touchStartP = e.touches[0].pageX;
			},
			touchMove:function(e) {
				this.moveLength = this.touchStartP - e.touches[0].pageX;
			},
			touchEnd:function(e) {
				console.log(this.moveLength);
				if (this.moveLength > 60) {
					this.isDelete = true
					this.currentIndex = e.currentTarget.dataset.target;
				}
				if (this.moveLength < -60) {
					this.isDelete = false;
					this.currentIndex = null;
				}
				this.resetMove();
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.slide-item {
		width: 100%;
		height: 100upx;
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.slide-item .item {
		width: 700upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #fff;
		border-radius: 20upx;
		z-index: 1;
	}
	.item text {
		margin-left: 30upx;
	}
	.slide-item .delete-btn {
		width: 120upx;
		height: 100%;
		position: absolute;
		right: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: -1;
	}
	.delete-btn .btn {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: red;
		box-shadow: 0 5upx 5upx red;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.showDelete {
		animation-name: move;
		animation-duration: .6s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
	}
	@keyframes move{
		to{
			transform: translateX(-160upx);
			transition: all .6s linear;
		}
	}
</style>