HarmonyOS 鸿蒙Next 实现下拉刷新+上拉加载的封装

下拉刷新

Refresh组件支持下拉刷新，包裹list组件，下拉事件中更新列表

@Entry
@Component
struct RefreshCase {
  @State
  refreshing: boolean = false
  @Builder
  refreshContent() {
    Text('正在加载中...')
      .width('100%')
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Pink)
  }
  @State
  list: number[] = Array(20).fill(Date.now())


  build() {
    RelativeContainer() {
      Refresh({ refreshing: $$this.refreshing, builder: this.refreshContent }) {
        List() {
          ForEach(this.list, (item: number) => {
            ListItem() {
              Row() {
                Text(item.toString())
              }.width('100%').padding(20).border({
                width: {
                  bottom: 1
                },
                color: Color.Gray,

              })
            }
          })
        }

      }.onRefreshing(() => {
        setTimeout(() => {
          this.list = Array(20).fill(Date.now())
          this.refreshing = false
        }, 1000)
      })
    }
    .height('100%')
    .width('100%')
  }
}

上拉加载

image.png

注册三个事件，开始滚动，滚动结束，滚动至列表尾部(触发两次，滚动至+回弹)

设置变量是否滚动底部，开始滚动false,滚动至列表尾部true，滚动结束判断变量进行数据追加

@Entry
@Component
struct RefreshCase {
  @State
  refreshing: boolean = false

  @Builder
  refreshContent() {
    Text('正在加载中...')
      .width('100%')
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Pink)
  }
  scroller:Scroller = new Scroller()
  @State
  list: number[] = Array(20).fill(Date.now())
  @State
  isEnd: boolean = false

  build() {
    RelativeContainer() {
      Refresh({ refreshing: $$this.refreshing, builder: this.refreshContent }) {
        List({scroller:this.scroller}) {
          ForEach(this.list, (item: number) => {
            ListItem() {
              Row() {
                Text(item.toString())
              }.width('100%').padding(20).border({
                width: {
                  bottom: 1
                },
                color: Color.Gray,

              })
            }
          })
        }

        .onScrollStart(() => {
          this.isEnd = false
        })
        .onScrollStop(() => {
          if(this.isEnd){
            setTimeout(()=>{
              this.list.push(...Array(10).fill(Date.now()))
               promptAction.showToast({
                message: '已添加10条数据'
              })
              this.scroller.scrollEdge(Edge.Bottom)
            },1000)
          }
        })
        .onReachEnd(() => {
          this.isEnd = true
        })
      }.onRefreshing(() => {
        setTimeout(() => {
          this.list = Array(20).fill(Date.now())
          this.refreshing = false
        }, 1000)
      })
    }
    .height('100%')
    .width('100%')
  }
}