How to implement simple left slip deletion in applet

Syntax based on vue

• touchStart
• touchMove
• touchEnd
  
  This is the first effect. We need to hide the delete button

z-index: -1

Then set the z-index of the item to 2

z-index: 1

After hiding, write the sliding function. First, listen to the starting position

touchStart:function(e) {
//If you don't know why, console.log(e)
//You can see everything about it in it
	this.touchStartP = e.touches[0].pageX;
},

And then we calculate the sliding distance

touchMove:function(e) {
//Calculate sliding distance
	this.moveLength = this.touchStartP - e.touches[0].pageX;
},

touchEnd:function(e) {
//Judge sliding distance
	if (this.moveLength > 60) {
		this.isDelete = true
		this.currentIndex = e.currentTarget.dataset.target;
	}
	else if (this.moveLength < -60) {
		this.isDelete = false;
		this.currentIndex = null;
	}
	//Reset function because the last value has been recorded
	//So reset it will not affect the next operation
	this.resetMove();
},

Reset function

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

Bind the showDelete class to add an animation when sliding

.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;
		}
	}

At this point, the sliding deletion is completed, but there is a defect that when the deletion is cancelled, the rebound effect is a little stiff
Personal realization method, do not like to touch, have better method, welcome to communicate with each other
Complete code (delete function and write by yourself)

<template>
	<view class="container">
		<view class="slide-item" v-for="(slideItem,index) in slideList" :key="index">
			<!-- Main content -->
			<view class="item" :class="{showDelete: isDelete && currentIndex == index,}" @touchstart="touchStart" 
					@touchmove="touchMove" @touchend="touchEnd" :data-target="index">
				<text>{{slideItem.name}}</text>
			</view>
			<!-- Delete button -->
			<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>