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

鸿蒙：实现列表单项左滑删除

news 2025/10/14 11:54:00

1. 前言

之前的博客也分享过列表左滑动删除的实现方案，但是之前并不是滑动就立马删除，而是需要左滑动出一个删除键，然后点击删除键再删除。本篇博客删除方法则更为快捷，直接左滑到一定程度，就可以删除效果。

2. 参考文档

https://developer.huawei.com/consumer/cn/doc/architecture-guides/common-v1_26-ts_128-0000002373045896

3. 核心思路

通过滑动手势（PanGesture）检测用户向左滑动超过 150vp 的操作，触发删除流程；
先标记要删除的项（记录其 id），并通过透明度和位移动画使其视觉上消失；
动画结束后，从数据源数组中移除该元素，同时重置删除状态，实现数据与 UI 的同步删除。

4. 核心代码

.opacity(this.deletingId === item.id ? 0 : 1) // 设置删除项的透明度.transition(TransitionEffect.opacity(0.5).combine(TransitionEffect.translate({ x: '-200vp' }))).gesture(PanGesture().onActionUpdate((event: GestureEvent) => {if (event.offsetX < -150 && !this.isDeleting) {this.isDeleting = truethis.deletingId = item.id // 设置正在删除的项// 先执行动画this.getUIContext().animateTo({ duration: 400 }, () => {this.deletingId = item.id})// 动画完成后删除数据setTimeout(() => {const index = this.arr.findIndex(i => i.id === item.id)if (index !== -1) {this.arr.splice(index, 1)}this.isDeleting = falsethis.deletingId = -1}, 400)}}))
}, (item: IDVALUE) => item.id.toString()) // 使用唯一ID作为键值

5. 运行效果

6. 完整代码

Index.ets

interface IDVALUE {id: number,value: number
}@Entry
@ComponentV2
struct Index {// 使用对象数组，每个项包含唯一id和值@Local arr: Array<IDVALUE> = [{ id: 1, value: 1 }, { id: 2, value: 2 }, { id: 3, value: 3 },{ id: 4, value: 4 }, { id: 5, value: 5 }, { id: 6, value: 6 },{ id: 7, value: 7 }, { id: 8, value: 8 }, { id: 9, value: 9 },{ id: 10, value: 10 }]@Local isDeleting: boolean = false@Local deletingId: number = -1 // 记录正在删除的项IDbuild() {Column() {Text("列表单项左滑删除练习").fontSize(30).fontWeight(FontWeight.Bold)List() {ForEach(this.arr, (item: IDVALUE) => {ListItem() {Text("这是😶：" + item.value).fontWeight(FontWeight.Bold).fontSize(30).fontColor(Color.White)}.borderRadius(10).margin(5).width("90%").backgroundColor("#4798ce").padding(10).opacity(this.deletingId === item.id ? 0 : 1) // 设置删除项的透明度.transition(TransitionEffect.opacity(0.5).combine(TransitionEffect.translate({ x: '-200vp' }))).gesture(PanGesture().onActionUpdate((event: GestureEvent) => {if (event.offsetX < -150 && !this.isDeleting) {this.isDeleting = truethis.deletingId = item.id // 设置正在删除的项// 先执行动画this.getUIContext().animateTo({ duration: 400 }, () => {this.deletingId = item.id})// 动画完成后删除数据setTimeout(() => {const index = this.arr.findIndex(i => i.id === item.id)if (index !== -1) {this.arr.splice(index, 1)}this.isDeleting = falsethis.deletingId = -1}, 400)}}))}, (item: IDVALUE) => item.id.toString()) // 使用唯一ID作为键值}.height("90%").width("100%")}.justifyContent(FlexAlign.Center).width("100%").height("100%")}
}

觉得有帮助可以点赞或收藏

查看全文

http://www.dtcms.com/a/479176.html