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

uni-app移动端实现触摸滑动功能：展开收起、滑动删除；根据X轴或者Y轴的坐标，计算差值，当差值超出设置的滑动阈值（自定义大小），执行所需要的功能。
一、滑动展开收起内容
实现：弹出框默认展示部分内容，手触摸当前内容，向上滑动显示全部内容，向下滑动收起页面展示默认的内容；

<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>

<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>

<style lang="scss" scoped>.popup-container {.device-other {transition: max-height 0.3s ease;max-height: 0rpx; /* 初始高度 */&.show-all {max-height: 700rpx; /* 展开时高度 */}}}
</style>

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

<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>

<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>