#鸿蒙通关秘籍#如何在HarmonyOS中为ListItem设置长距离滑动删除？

@Entry
@Component
struct LongSwipeActionExample {
  @State listData: Array<number> = [0, 1, 2, 3]

  @Builder leftSwipeAction() {
    Button("删除")
      .backgroundColor(0xFF0000)
      .onClick(() => {
        // 删除
      })
      .margin("8vp")
  }

  build() {
    Column() {
      List() {
        ForEach(this.listData, (item: number) => {
          ListItem() {
            Text('内容 ' + item)
              .width('100%')
              .height(60)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
          .swipeAction({
            start: {
              builder: this.leftSwipeAction(),
              actionAreaDistance: 80,
              onEnterActionArea: () => {
                // 进入删除区域
              },
              onExitActionArea: () => {
                // 退出删除区域
              },
              onAction: () => {
                this.listData = this.listData.filter(value => value !== item)
              }
            }
          })
        })
      }
    }
    .backgroundColor(0xF0F0F0)
    .width('100%')
    .padding(12)
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.