HarmonyOS List控件里面的swipeAction滑动按钮, 是否可以代码控制还原

List({ space: 8, initialIndex: 0 }) {
  ListItem() {

  }.swipeAction({
    end: this.actionItem(item)
  })
}

使用swipeAction的api实现滑动删除按钮功能,目前需求是当滑出item,需要关闭这个滑动。该如何实现?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用ListScroller提供的closeAllSwipeActions()方法将滑动效果进行恢复,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#closeallswipeactions11

参考示例如下:

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

  @Builder
  itemEnd() {
    Row() {
      Button("Delete").margin("4vp")
        .onClick(() => {
          this.scrollerForList.closeAllSwipeActions() // 重点是这行代码
        })
      Button("Set").margin("4vp")
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
    .onClick(() => {
      console.log("点击set")
    })
  }

  build() {
    Column() {
      List({ space: 5, scroller: this.scrollerForList }) {
        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({
            end: item !== 0 ? {
              builder: () => {
                this.itemEnd()
              },
              onAction: () => {
                animateTo({
                  duration: 1000
                },
                  () => {
                    let index = this.arr.indexOf(item)
                    this.arr.splice(index, 1)
                  })
              },
              actionAreaDistance: 56,
              onEnterActionArea: () => {
                this.enterEndDeleteAreaString = "enterEndDeleteArea"
                this.exitEndDeleteAreaString = "not exitEndDeleteArea"
              },
              onExitActionArea: () => {
                this.enterEndDeleteAreaString = "not enterEndDeleteArea"
                this.exitEndDeleteAreaString = "exitEndDeleteArea"
              }
            } : undefined
          })
        },
          (item: string) => item)
      }

      Text(this.enterEndDeleteAreaString).fontSize(20)
      Text(this.exitEndDeleteAreaString).fontSize(20)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
    .zIndex(0)
    .onClick(() => {
      console.log("点击其他地方")
      this.scrollerForList.closeAllSwipeActions() // 重点是这行代码
    })
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS List滑动速度是否控制
318浏览 • 1回复 待解决
返回按钮是否可以自定义事件?
252浏览 • 1回复 待解决
TaskPool里面是否可以使用EventHub
1788浏览 • 1回复 待解决
HarmonyOS List联动滑动
50浏览 • 1回复 待解决