HarmonyOSBaseLibs/src/main/ets/view/RefreshView.ets

import { ToolsHelper } from '../utils/ToolsHelper'

@Component
export struct RefreshView {
  @Link isLoading: boolean
  @Prop data: Array<ESObject>
  @Require keyGenerator?: (item: ESObject, index: number) => string
  pageSize: number = 10
  onLoadMore?: (pageNum: number) => void
  onRefresh?: () => void
  private startY: number = 0
  private endY: number = 0
  private lastNum: number = 0
  private _openMore: boolean = false

  aboutToAppear(): void {
    this.onRefresh && this.onRefresh()
  }

  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: (item: ESObject, index: number) => void

  build() {

    Refresh({ refreshing: $$this.isLoading }) {
      if (this.data && this.data.length > 0) {
        List() {
          ForEach(this.data ?? [], (item: ESObject, index: number) => {
            ListItem() {
              this.customBuilderParam(item, index)
            }
          }, (item: ESObject, index: number) => this.keyGenerator!(item, index))
        }
        .onTouch((event: TouchEvent) => {
          const e1 = event.touches[0]
          switch (event.type) {
            case TouchType.Down:
              this._openMore = this.data && this.lastNum >= this.data.length && !this.isLoading
              this.startY = e1.y
              break
            case TouchType.Up:
              this.endY = e1.y
              if (this.endY - this.startY < -100 && this._openMore) {
                const v = this.data && (this.data.length % this.pageSize) === 0
                if (v) {
                  this.onLoadMore && this.onLoadMore(Math.floor(this.data.length / this.pageSize))
                } else {
                  ToolsHelper.showMessage('没有更多数据了')
                }
              }
              break
          }
        })
        .onScrollIndex((first: number, last: number) => {
          this.lastNum = last + 1
        })
        .width('100%')
        .height('100%')
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.Off)
      } else {
        Text('暂无数据')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)

      }
    }
    .width('100%')
    .layoutWeight(1)
    .onStateChange((refreshStatus: RefreshStatus) => {
      // ToolsHelper.log('Refresh onStatueChange state is ' + refreshStatus)
    })
    .onRefreshing(() => {
      this.onRefresh && this.onRefresh()
    })
  }
}