yizhizan-h5/components/swiper-delete.vue

<template>
	<view class="swipe-delete-wrapper">
		<view
			class="swipe-delete-container"
			:style="{ transform: `translateX(${translateX}px)`, transition: transitionStyle }"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
		>
			<!-- 主体内容插槽：完全交给外部控制样式 -->
			<view class="swipe-content">
				<slot></slot>
			</view>
			<!-- 删除按钮：仅保留基础样式，无额外间距/边框 -->
			<view class="swipe-delete-btn" @tap.stop="handleDelete">
				{{ btnText || '删除' }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SwipeDelete',
		props: {
			btnText: {
				type: String,
				default: '删除'
			},
			btnWidth: {
				type: [Number, String],
				default: 80
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				translateX: 0,
				startX: 0,
				startY: 0,
				isMoving: false,
				transitionStyle: 'transform 0.3s ease',
				maxSlide: 0,
				startTranslateX: 0
			};
		},
		created() {
			this.maxSlide = -Number(this.btnWidth);
		},
		methods: {
			handleTouchStart(e) {
				if (this.disabled) return;
				e.preventDefault(); // 阻止iOS默认触摸行为
				this.transitionStyle = 'none'; // 滑动时取消动画，更跟手
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
				this.startTranslateX = this.translateX; // 记录当前偏移量，避免展开后继续滑触发动画
				this.isMoving = true;
			},
			handleTouchMove(e) {
				if (!this.isMoving || this.disabled) return;
				const moveX = e.changedTouches[0].clientX - this.startX;
				const moveY = e.changedTouches[0].clientY - this.startY;

				// 过滤竖向滑动，避免上下滚动误触
				if (Math.abs(moveY) > Math.abs(moveX)) {
					this.isMoving = false;
					return;
				}

				// 基于当前偏移量计算新位置，严格限制滑动边界（0 ~ -btnWidth）
				let newTranslateX = this.startTranslateX + moveX;
				newTranslateX = Math.max(this.maxSlide, Math.min(0, newTranslateX));

				// 仅偏移量变化时更新，避免冗余动画
				if (newTranslateX !== this.translateX) {
					this.translateX = newTranslateX;
				}
			},
			handleTouchEnd() {
				if (this.disabled) return;
				this.isMoving = false;
				this.transitionStyle = 'transform 0.3s ease'; // 恢复动画，平滑复位/展开

				// 低阈值判断，避免回滑突然复位（滑动超过30%才展开）
				const slideRatio = Math.abs(this.translateX) / Math.abs(this.maxSlide);
				this.translateX = slideRatio > 0.3 ? this.maxSlide : 0;
			},
			handleDelete() {
				this.$emit('delete'); // 触发删除事件，交给外部处理逻辑
				this.translateX = 0; // 点击删除后自动收回
			},
			close() {
				// 供外部手动关闭（比如列表刷新时）
				this.transitionStyle = 'transform 0.3s ease';
				this.translateX = 0;
			}
		}
	};
</script>

<style scoped>
	/* 外层容器：仅保留溢出隐藏和定位，无边框/间距 */
	.swipe-delete-wrapper {
		width: 100%;
		overflow: hidden;
		/* 核心：隐藏右侧的删除按钮 */
		position: relative;
	}

	/* 滑动容器：宽度=100%+按钮宽，确保删除按钮在屏幕外 */
	.swipe-delete-container {
		display: flex;
		width: calc(100% + 80px);
		height: 100%;
		position: relative;
	}

	/* 主体内容：仅占满宽度，无额外样式，交给外部控制 */
	.swipe-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		/* 避免外部padding导致宽度溢出 */
	}

	/* 删除按钮：仅保留核心样式，无圆角/边框，适配外部容器 */
	.swipe-delete-btn {
		width: 80px;
		height: 100%;
		background-color: #ff4757;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		flex-shrink: 0;
		/* 防止宽度被压缩 */
		position: absolute;
		right: 0;
		top: 0;
	}
</style>