HarmonyOS Next Refresh+List实现下拉刷新上拉加载

记录实现Refresh+List常用组件搭配

实现List刷新和加载更多功能

实现自定义刷新头和加载更多样式

实现左滑右滑展示更多操作按键功能

@Component
export struct ListMessage {
  @State isRefreshing: boolean = false
  @State datas: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State canLoad: boolean = false;
  @State isLoading: boolean = false;
  private scroller: ListScroller = new ListScroller()
  //左滑更多显示
  @Builder
  itemEnd() {
    Row() {
      Image($r('app.media.user_icon_clear')).width(30).height(30)
    }.width(100).justifyContent(FlexAlign.SpaceEvenly)
  }
  //自定义刷新头
  @Builder
  customRefreshComponent() {
    Stack() {
      Row() {
        LoadingProgress().height(32)
        Text("Refreshing...").fontSize(16).margin({ left: 20 })
      }
      .alignItems(VerticalAlign.Center)
    }
    .align(Alignment.Center)
    .clip(true)
    // 设置最小高度约束保证自定义组件高度随刷新区域高度变化时自定义组件高度不会低于minHeight
    .constraintSize({ minHeight: 32 })
    .width("100%")
  }
  //自定义加载更多
  @Builder
  footer() {
    Row() {
      LoadingProgress().height(32).width(48)
      Text("加载中").fontColor(Color.Gray)
    }.width("100%")
    .height(64)
    .justifyContent(FlexAlign.Center)
    // 当不处于加载中状态时隐藏组件
    .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)
  }
  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
        List({ space: 10, scroller: this.scroller }) {
          ForEach(this.datas, (item: number, index: number) => {
            ListItem() {
              Text("item" + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
            .swipeAction({
              end: {
                builder: () => {
                  this.itemEnd()
                },
                onAction: () => {
                  animateTo({ duration: 1000 }, () => {
                    let index = this.datas.indexOf(item)
                    this.datas.splice(index, 1)
                  })
                },
                actionAreaDistance: 56, //设置组件长距离滑动删除距离阈值
              }
            })
          })
          
          ListItem() {
            this.footer();
          }
        }
        .onScrollIndex((first: number, end: number) => {
          // 当达到列表末尾时，触发新数据加载
          if (this.canLoad && end >= this.datas.length - 1) {
            this.canLoad = false;
            this.isLoading = true;
            //模拟加载更多数据
            setTimeout(() => {
              for (let i = 10; i < 20; i++) {
                this.datas.push(i)
              }
              this.isLoading = false;
            }, 2000)
          }
        })
        .onScrollFrameBegin((offset: number, state: ScrollState) => {
          // 只有当向上滑动时触发新数据加载
          if (offset > 5 && !this.isLoading) {
            this.canLoad = true;
          }
          return { offsetRemain: offset };
        })
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.datas=[]
          //模拟刷新数据
          for (let index = 0; index <10; index++) {
            this.datas.push(index)
          }
          this.isRefreshing = false
        }, 2000)
      })

    }.padding({ left: 10, right: 10 ,top:30})
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')

  }
}