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

@Componentexport 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%')
  }}