HarmonyOS List列表,如何点击某个按钮,展示和隐藏ListItem中的swiperAction划出组件

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

可以使用一下demo实现显示隐藏动画效果:

@Entry
@Component struct Index {
  @State arr: number[] = [0,]//只使用一个进行测试
  private listScroller: ListScroller = new ListScroller()
  @State lastX:number=0
  @State isVisible:Visibility=Visibility.None
  @Builder
  build() {
    Column() {
      List() {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Scroll(this.listScroller){
              Row(){
                Text("item" + item)
                  .width('100%')
                  .height(100)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10) .backgroundColor(0xFFFFFF)
                  .onClick(() => {
                    //可以使用点击事件控制
                    if(this.isVisible==Visibility.None){
                      animateTo({duration:800},()=>{
                        this.isVisible=Visibility.Visible
                        this.listScroller.scrollTo({
                          xOffset:200,
                          yOffset:0
                        })
                      })

                    }else{
                      animateTo({duration:800},()=>{
                        this.isVisible=Visibility.None
                      })
                    }
                  })
                  .onTouch((event:TouchEvent)=>{
                    if(event.type==TouchType.Down){
                      let res=event.changedTouches
                      this.lastX=res[0].displayX
                    }
                    if(event.type==TouchType.Move){

                      //检测一下是不是已经进来了
                      let res=event.changedTouches
                      let nx=res[0].displayX
                      if(nx<this.lastX-20){
                        //向左拖动,以20vp为单位
                        animateTo({duration:600,onFinish:()=>{
                          this.lastX=nx
                        }},()=>{
                          this.isVisible=Visibility.Visible
                          this.listScroller.scrollTo({
                            xOffset:200,
                            yOffset:0
                          })
                        })
                      }
                      else{
                        if(nx>this.lastX+20){
                          //向右拖动
                          animateTo({duration:600,onFinish:()=>{
                            this.lastX=nx
                          }},()=>{
                            this.isVisible=Visibility.None
                          })
                        }
                      }
                    }
                    if(event.type==TouchType.Up ||event.type==TouchType.Cancel){
                      this.lastX=0
                    }
                  })
                Row(){
                  Button("编辑")
                  Button("删除")
                }.visibility($$this.isVisible)
              }
            }.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
          }
          .transition({ type: TransitionType.Delete, opacity: 0 })
        })}
      .padding(10)
      .backgroundColor(0xDCDCDC)
      .width('100%') .height('100%')
    }
  }}
分享
微博
QQ
微信
回复
2天前
相关问题
ListListItem组件使用
1783浏览 • 1回复 待解决
HarmonyOS 列表展示list懒加载问题
660浏览 • 1回复 待解决
HarmonyOS picker组件如何隐藏拍照按钮
52浏览 • 1回复 待解决
如何执行点击某个组件命令?
4181浏览 • 1回复 待解决
HarmonyOS如何实现list listitem拖拽
954浏览 • 1回复 待解决
List列表组件如何改为横向显示
967浏览 • 1回复 待解决