uniapp上实现一个左滑显示删除按钮，右滑删除按钮消失

功能需求

产品提出来需要实现左滑动特定的一项，来显示删除按钮，用户右滑动隐藏删除按钮（ps：没用原生的是因为样式与视觉给的不符合，不如自己设计一个）

具体功能实现

1. html部分

<template>
   <view class="content">
   	<view class="container" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: leftStyle + 'rpx'}">
   		<view>
   			lalalallalal
   		</view>
   		<view class="delete-icon">
   			删除
   		</view>
   	</view>
   </view>
</template>

核心功能逻辑：修改leftStyle的值使container进行滑动
2. js部分

export default {
	    data() {
			return {
				leftStyle: 0,
				startX: 0,
				hiddenFlag: true, 
				delBtnWidth: 220,
			}
		},
		methods: {
			// 开始移动时
			touchS({ touches }) {
				// startX记录开始移动的位置
				if(touches.length === 1) {
					this.startX = touches[0].clientX;
				}
				// hiddenFlag为true则是从右向左，为false则是从左向右
				if(this.leftStyle === 0) {
					this.hiddenFlag = true;
				} else {
					this.hiddenFlag = false;
				}
			},
			touchM({ touches }) {
				if(touches.length === 1) {
					//手指移动时水平方向位置
					const moveX = touches[0].clientX;
					this.moveFunc(moveX);
				}
			},
			touchE({ touches }) {
				const { leftStyle } = this;
				const { delBtnWidth } = this;
				// 如果停止滑动的距离大于二分之一则直接弹出删除按钮，不然则left为0
				if(-leftStyle > delBtnWidth/2) {
					this.leftStyle = -delBtnWidth;
				} else {
					this.leftStyle = 0;
				}
			},
			moveFunc(moveX) {
				// 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
				// disX为相对最初位置的左右距离
				// 大于0为向右，小于0为向左
				const disX = moveX - this.startX;
				const delBtnWidth = this.delBtnWidth;
				let offsetNum = 0;
				if(-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
					return;
				}
				console.log(disX, this.hiddenFlag);
				// this.hiddenFlag为true则是从左到右，则应该将container向左移动
				// this.hiddenFlag为false则是从右向左，则应该将container向右移动
				if(this.hiddenFlag) {
					// 此时container为最右边，则应该将container向左移动
					// disX大于0为相对原始位置的向右移动，则直接将offsetNum置为0
					// 否则为向左移动，offsetNum为disX相反的值，判断是否超过设置的最大位置
					if(disX == 0 || disX > 0) {
						offsetNum = 0;
					} else {
						offsetNum = disX;
						if (disX <= -delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							offsetNum = -delBtnWidth;
						}
					}
				} else {
					// 此时container为最左边，应该向右移动
					// disX小于0为相对原始位置的向左移动，则直接将offsetNum置为-this.delBtnWidth
					// 否则为相对原始位置的向右移动，此时应该将最大位置与向右位置的差值为此刻位置，判断是否为大于0
					if(disX < 0) {
						offsetNum = -this.delBtnWidth;
					} else {
						offsetNum = -this.delBtnWidth + disX;
						if(offsetNum > 0) {
							offsetNum = 0;
						}
					}
				}
				this.leftStyle = offsetNum;
			}
		}

重要的部分：
1.touchS时记录此时此刻的位置，并且判断container的初始位置是最左还是最右
2.touchM时，如果初始位置最左，则只能右移，如果初始位置最右，只能左移
3.touchE时，如果停止的位置大于最大位置/2则调整到最左位置，否则在最右位置
3. css部分
.content {
width: 100%;
overflow-x: hidden;
}
.container {
position: relative;
margin-top: 26rpx;
border: 1rpx solid #D6DFFF;
border-radius: 8rpx;
background: #F5F7FF;
}
.delete-icon {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -197rpx;
width: 130rpx;
height: 62rpx;
line-height: 62rpx;
border-radius: 31rpx;
font-weight: 500;
font-size: 32rpx;
text-align: center;
color: #FFFFFF;
background: #FF1C1C;
}

重要部分
1.父组件为relative，通过调整left来进行调整基于原始的位置
2.删除按钮为absolute，按钮基于父组件进行定位，因此父组件移动，删除按钮跟随着移动，父组件移动到最左位置，删除按钮出现

效果图

用户可自行滑动来进行展示删除或不展示