uniapp超级丝滑的滑块效果，可跟随手指拖动

<template>
	<div class="container" @touchstart="touchStart" @touchend="touchEnd" @touchmove="handletouchmove">
		<div class="content">
			内容部分
		</div>
		<div class="slider" :style="{ transform: `translateX(${sliderPosition}px)` }">
			侧滑部分
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isSliding: false, //是否在进行侧滑操作
				startX: 0, //启示位置
				sliderPosition: -200, //侧滑元素（滑块）的当前横向位置
				// currentX: 0,
				startXs: 0,
				endX: 0,
			};
		},
		methods: {
			touchStart(event) {
				console.log('touchStart:触摸开始', event.touches[0].clientX);
				this.isSliding = true;
				this.startX = event.touches[0].clientX;
				this.startXs = event.touches[0].clientX
			},
			touchEnd(event) {
				console.log('touchEnd，触摸结束', event.mp.changedTouches[0].clientX);
				this.isSliding = false;
				this.endX = event.mp.changedTouches[0].clientX
				// 触发滑快是否全部绽放 或者全部收起
				this.assaaa()
			},
			// 滑块向左移动了30% 用户触摸滑动
			assaaa() {
				// 终点-起点判断移动了多少
				const deltaX = this.endX - this.startXs;
				console.log('移动了，', deltaX);
				if(deltaX > -100){
					console.log('开启滑块');
					this.sliderPosition =  0;
				}
				if(deltaX < 100){
					console.log('关闭滑块');
					this.sliderPosition =  -200;
				}
			},
			handletouchmove(event) {
				console.log('handletouchmove触摸移动');
				if (this.isSliding) {
					const currentX = event.touches[0].clientX;//移动的当前位置
					const deltaX = currentX - this.startX; //移动的当前位置-开始位置 = 滑块的所在位置
					this.sliderPosition += deltaX;

					// 限制侧滑的最大宽度，可以根据需要调整
					if (this.sliderPosition > 0) {
						console.log('进来了0');
						this.sliderPosition = 0;
					}

					// 限制侧滑的最小宽度，可以根据需要调整
					if (this.sliderPosition < -200) {
						console.log('进来了-100');
						this.sliderPosition = -200;
					}
					this.startX = currentX;
					console.log('this.startX：', this.startX);
				}
			},
		},
	};
</script>

<style scoped>
	.container {
		display: flex;
		overflow: hidden;
		position: relative;
	}

	.content {
		flex: 1;
		background-color: #f0f0f0;
		height: 1000rpx;
		/* 内容部分样式 */
	}

	.slider {
		background-color: #3498db;
		width: 200px;
		/* 侧滑宽度，可以根据需要调整 */
		position: absolute;
		top: 0;
		bottom: 0;
		transform: translateX(0);
		transition: transform 0.3s;
		z-index: 1;
		/* 侧滑部分样式 */
	}
</style>