HarmonyOS鸿蒙Next中如何实现文章类下拉加载和上拉加载效果？

实现思路

首先进行布局，使用 Refresh 布局，通过 List布局内容。

然后通过SwipeRefresher定义头部加载效果。

  @Builder genrefresh(){ 
    Column(){
      SwipeRefresher({content:'刷新中...',isLoading:true})
    }.padding(20)
  }

最后使用Progress来进行底部的一个自定义加载动态布局 。

@Builder footer(){//自定义加载布局
    Row(){
      Progress({value:5,type:ProgressType.Ring}).style({status:ProgressStatus.LOADING}).color(Color.Black).width(45)
      Text('加载中...').fontSize(20).margin({left:20})
    }.width('100%').padding(10).backgroundColor(Color.White).justifyContent(FlexAlign.Center)
    .visibility(this.isloading?Visibility.Visible:Visibility.Hidden) 
  }

效果

使用场景

文章类、列表类、图片流类等各种数据量多需要加载的场景。

完整代码

import { SwipeRefresher } from '@kit.ArkUI';

@Entry
@Component
struct Refreshpage {
  //刷新
  @State isrefreshing: boolean = false
  //加载
  @State isloading:boolean=false
  //初始人数据显示
  @State sourceData: string[] = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10']
  //新增额外数据
  @State extradatas: string[] = ['新增1', '新增2', '新增3', '新增4', '新增5', '新增6']
  //新数据数据源
  @State newDatas: string[] =
    ['我爱我家1', '我爱我家2', '我爱我家3', '我爱我家4', '我爱我家5', '我爱我家6', '我爱我家7', '我爱我家8', '我爱我家9', '我爱我家10']

  @Builder footer(){
    Row(){
      Progress({value:5,type:ProgressType.Ring}).style({status:ProgressStatus.LOADING}).color(Color.Black).width(45)
      Text('加载中...').fontSize(20).margin({left:20})
    }.width('100%').padding(10).backgroundColor(Color.White).justifyContent(FlexAlign.Center)
    .visibility(this.isloading?Visibility.Visible:Visibility.Hidden) 
  }

  @Builder genrefresh(){ 
    Column(){
      SwipeRefresher({content:'刷新中...',isLoading:true})
    }.padding(20)
  }




  build() {
    Column() {
      Refresh({ refreshing: $$this.isrefreshing,builder:this.genrefresh() }) {
        List() {
          ForEach(this.sourceData, (item: string) => {
            ListItem() {
              Text(item)
                .fontSize(18)
                .border({ width: 0.5, color: Color.Gray })
                .backgroundColor(Color.White)
                .width('100%')
                .textAlign(TextAlign.Center)
                .padding(30)
            }

          },)
          ListItem(){
            this.footer()
          }
        }.width('100%')
        .height('100%')
        .backgroundColor('#F1F3F5')
        .edgeEffect(EdgeEffect.Spring)
        .onScrollIndex((start: number, end: number, center: number) => {
          if (end == this.sourceData.length) {
            this.isloading=true
            setTimeout(() => {
              this.sourceData.push(...this.extradatas)
              this.isloading=false

            }, 2000)
          }
        })
      }.width('100%').height('100%')
      .onRefreshing(() => {
        setTimeout(() => {
          this.sourceData = this.newDatas
          this.isrefreshing = false
        }, 2000)
      })
    }
    .height('100%')
    .width('100%')
  }
}