鸿蒙-左滑到底自动删除 & 禁止右滑，允许左滑

小蘑菇2018

已于 2024-08-08 14:08:33 修改

阅读量434

点赞数 3

文章标签：鸿蒙

于 2024-08-01 15:27:29 首次发布

本文链接：https://blog.csdn.net/m0_51170428/article/details/140849100

版权

@Entry
@Component
struct ListItemExample2 {
  @State arr: number[] = [0, 1, 2, 3, 4]
  @State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
  @State exitEndDeleteAreaString: string = "not exitEndDeleteArea"

  @Builder
  itemStart() {
    Row() {
      Button("Set").margin("4vp")
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }

  @Builder
  itemEnd() {
    Row() {
      Button("Delete").margin("4vp")
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text("item" + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .transition({ type: TransitionType.Delete, opacity: 0 })
          .swipeAction({
            // start: {
            // builder: () => {
            // this.itemStart()
            // },
            // onAction: () => {
            // animateTo({ duration: 1000 }, () => {
            // let index = this.arr.indexOf(item)
            // this.arr.splice(index, 1)
            // })
            // },
            // actionAreaDistance: 56,
            // }
            edgeEffect: SwipeEdgeEffect.None,   // 禁止右滑，允许左滑，是该属性控制
            end: {
              builder: () => {
                this.itemEnd()
              },
              onAction: () => {
                animateTo({ duration: 1000 }, () => {
                  let index = this.arr.indexOf(item)
                  this.arr.splice(index, 1)
                })
              },
              actionAreaDistance: 56,
            }
          })
        }, (item: string) => item)
      }

      Text(this.enterEndDeleteAreaString).fontSize(20)
      Text(this.exitEndDeleteAreaString).fontSize(20)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}