当前位置：首页 > news >正文

鸿蒙OSUniApp 实现带有滑动删除的列表#三方框架 #Uniapp

news 2025/6/9 2:39:05

使用 UniApp 实现带有滑动删除的列表

在移动应用开发中，滑动删除（Swipe to Delete）是一种常见且实用的交互方式，广泛应用于消息、待办、收藏等列表场景。用户只需在列表项上左右滑动，即可快速删除或管理数据。随着 HarmonyOS（鸿蒙）生态的兴起，如何用 UniApp 实现一个兼容鸿蒙的滑动删除列表，成为许多开发者关注的话题。本文将结合实际项目经验，详细讲解如何用 UniApp 制作一个流畅、易扩展、适配鸿蒙的滑动删除列表组件。

为什么要实现滑动删除？

滑动删除相比传统的长按、点击删除按钮，具有以下优势：

操作直观，用户体验更好；
节省界面空间，提升美观度；
支持批量管理、扩展更多操作（如置顶、标记等）。

在鸿蒙快应用、微信小程序等多端场景下，滑动删除已成为主流交互方式。

方案设计与技术要点

手势识别：监听 touch 事件，判断滑动方向和距离。
动画过渡：滑动时平滑展开删除按钮，提升交互流畅度。
数据管理：删除后及时更新列表数据，支持多端同步。
鸿蒙适配：兼容 HarmonyOS 端的手势、动画、性能等体验。
易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

1. 组件结构与实现

我们以一个通用的 SwipeList 组件为例，支持自定义列表项、删除按钮样式。

<template><view class="swipe-list"><viewv-for="(item, idx) in list":key="item.id"class="swipe-item":style="swipeStyle(idx)"@touchstart="onTouchStart($event, idx)"@touchmove="onTouchMove($event, idx)"@touchend="onTouchEnd($event, idx)"><view class="item-content"><slot :item="item">{{ item.text }}</slot></view><view class="delete-btn" @click="onDelete(idx)">删除</view></view></view>
</template><script>
export default {name: 'SwipeList',props: {list: {type: Array,required: true}},data() {return {startX: 0,moveX: 0,activeIdx: -1,offsetArr: [] // 记录每个item的偏移量};},created() {this.offsetArr = this.list.map(() => 0);},watch: {list(newList) {this.offsetArr = newList.map(() => 0);}},methods: {swipeStyle(idx) {return {transform: `translateX(${this.offsetArr[idx]}px)`,transition: 'transform 0.2s cubic-bezier(0.4,0,0.2,1)'};},onTouchStart(e, idx) {this.startX = e.touches[0].clientX;this.activeIdx = idx;},onTouchMove(e, idx) {this.moveX = e.touches[0].clientX;let deltaX = this.moveX - this.startX;if (deltaX < 0 && Math.abs(deltaX) <= 120) {// 向左滑动，最大120pxthis.$set(this.offsetArr, idx, deltaX);}},onTouchEnd(e, idx) {let deltaX = this.moveX - this.startX;if (deltaX < -60) {// 滑动超过60px，展开删除this.$set(this.offsetArr, idx, -120);} else {// 否则回弹this.$set(this.offsetArr, idx, 0);}this.startX = 0;this.moveX = 0;},onDelete(idx) {this.$emit('delete', idx);this.$set(this.offsetArr, idx, 0);}}
};
</script><style scoped>
.swipe-list {width: 100vw;
}
.swipe-item {width: 100vw;background: #fff;position: relative;overflow: hidden;display: flex;align-items: center;margin-bottom: 2rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.item-content {flex: 1;padding: 32rpx 24rpx;font-size: 32rpx;color: #333;background: #fff;z-index: 1;
}
.delete-btn {width: 120px;height: 100%;background: #ff4d4f;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 30rpx;position: absolute;right: 0;top: 0;bottom: 0;z-index: 2;transition: background 0.2s;
}
.delete-btn:active {background: #d9363e;
}
</style>

2. 组件使用与数据管理

在页面中引用并使用 SwipeList 组件，实现删除功能：

<template><view><swipe-list :list="todoList" @delete="handleDelete"><template v-slot:default="{ item }"><view><text>{{ item.text }}</text></view></template></swipe-list></view>
</template><script>
import SwipeList from '@/components/swipe-list/swipe-list.vue';export default {components: { SwipeList },data() {return {todoList: [{ id: 1, text: '学习 UniApp 组件化' },{ id: 2, text: '适配鸿蒙快应用' },{ id: 3, text: '实现滑动删除交互' }]};},methods: {handleDelete(idx) {this.todoList.splice(idx, 1);}}
};
</script>