uniapp上實現一個左滑顯示刪除按鈕，右滑刪除按鈕消失

功能需求

產品提出來需要實現左滑動特定的一項，來顯示刪除按鈕，用戶右滑動隱藏刪除按鈕（ps：沒用原生的是因爲樣式與視覺給的不符合，不如自己設計一個）

具體功能實現

1. html部分

<template>
   <view class="container" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: leftStyle + 'rpx'}">
   	<view>
   		lalalallalal
   	</view>
   	<view class="delete-icon">
   		刪除
   	</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部分
.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，按鈕基於父組件進行定位，因此父組件移動，刪除按鈕跟隨着移動，父組件移動到最左位置，刪除按鈕出現

效果圖

用戶可自行滑動來進行展示刪除或不展示