uniapp移动端实现触摸滑动功能：上下滑动展开收起内容，左右滑动删除列表

uni-app移动端实现触摸滑动功能：展开收起、滑动删除；根据X轴或者Y轴的坐标，计算差值，当差值超出设置的滑动阈值（自定义大小），执行所需要的功能。

一、滑动展开收起内容

实现：弹出框默认展示部分内容，手触摸当前内容，向上滑动显示全部内容，向下滑动收起页面展示默认的内容；

html 复制代码

<template>
	<u-popup class="custom-popup" :show="showPopup" mode="bottom" :mask-close-able="true" :closeable="true"
		:overlay="false" customStyle="border-radius: 30rpx 30rpx 0rpx 0rpx;" zIndex="1001" bgColor="transparent"
		@close="closePopup">
		<!-- 弹出内容 -->
		<view class="popup-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
			@touchend="handleTouchEnd">
			<view class="device-top flex">
				<!-- 默认显示内容 -->
			</view>
			<view class="device-other" :class="{ 'show-all': isExpanded }">
				<!-- 展开内容 -->
			</view>
		</view>
	</u-popup>
</template>

javascript 复制代码

<script>
	export default {
		name: "UsbBlue",
		props: {
			showPopup: {
				type: Boolean,
				default: false
			},
			deviceData: {
				type: Object,
				default: null
			},
		},
		data() {
			return {
				isExpanded: false,
				isDragging: false,
				startY: 0,
			};
		},
		mounted() {},
		methods: {
			handleTouchStart(event) {
				this.isDragging = true;
				this.startY = event.touches[0].clientY; // 记录开始时的Y坐标
			},
			handleTouchMove(event) {
				if (!this.isDragging) return;
				const currentY = event.touches[0].clientY; // 当前触摸的Y坐标
				const diffY = this.startY - currentY; // 计算Y方向的移动距离（正值表示向下拖动，负值表示向上拖动）
				console.log(diffY);
				if (diffY > 10 && !this.isExpanded) { // 向上滑动时展开
					this.isExpanded = true;
					this.isDragging = false;
				} else if (diffY < -20 && this.isExpanded) { // 向下滑动时收起
					this.isExpanded = false;
					this.isDragging = false;
				} else if (diffY < -50) { // 大幅向下滑动时关闭弹窗
					this.closePopup();
					this.isDragging = false;
				}
			},
			handleTouchEnd() {},
			closePopup() {
				this.$emit("closePopup")
			}
		}
	}
</script>

css 复制代码

<style lang="scss" scoped>
	.popup-container {
		.device-other {
			transition: max-height 0.3s ease;
			max-height: 0rpx; /* 初始高度 */

			&.show-all {
				max-height: 700rpx; /* 展开时高度 */
			}
		}
	}
</style>

二、左右滑动清除列表

实现：手触摸列表，左右滑动清除当前列表；

html 复制代码

<template>
	<view class="device-tips">
		<view class="device-tips-item flex" v-for="(item,index) in deviceList" :key="index"
			@touchstart="(e) => handleTouchStart(e, index)" @touchmove="(e) => handleTouchMove(e, index)"
			@touchend="(e) => handleTouchEnd(e, index)">
			<!-- 列表内容 -->
		</view>
	</view>
</template>

javascript 复制代码

<script>
	export default {
		data() {
			return {
				deviceList: [{
					name: "设备名称",
					id: "H9K018008Y",
					count: 2,
				}, {
					name: "Unknow",
					id: "9012008Y",
					count: 5,
				}],
				startX: 0,
				currentIndex: -1,
			}
		},
		mounted() {},
		methods: {
			// 删除数据
			deleteData() {
				this.deviceList.splice(this.currentIndex, 1)
				// 删除后清理触摸状态
				this.currentIndex = null;
			},
			// 开始触摸
			handleTouchStart(event, index) {
				event.preventDefault();
				event.stopPropagation();
				this.startX = event.touches[0].clientX;
				this.currentIndex = index;
			},
			// 滑动中
			handleTouchMove(event, index) {
				const currentX = event.touches[0].clientX;
				const diffX = this.startX - currentX;
				// 左右滑动清除
				if (diffX > 200 || diffX < -200) {
					console.log(index, diffX, this.currentIndex);
					if (index === this.currentIndex) {
						this.deleteData(this.currentIndex);
						// 删除后清理触摸状态，防止重复触发
						this.startX = null;
					}
				}
			},

			handleTouchEnd(event, index) {},
		}
	}
</script>