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

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

type ItemType = (string | number | Object)

@Preview
@Component
export struct RefreshView {
  @Link isLoading: boolean
  @Prop data: Array<object>
  onLoadMore?: () => 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)
            }
          }, (index: number) => index.toString())
        }
        .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.Move:
          //   this.endY = e1.y
          //   if (this.endY - this.startY < -100) {
          //     this.loadMore&&this.loadMore()
          //   }
          // break
            case TouchType.Up:
              this.endY = e1.y
              if (this.endY - this.startY < -100 && this._openMore) {
                this.onLoadMore && this.onLoadMore()
              }
              break
          }
        })
        .onScrollIndex((first: number, last: number) => {
          this.lastNum = last
        })
        .width('100%')
        .height('100%')
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.Off)
      } else {
        Text('暂无数据')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
        
      }
    }
    .width('100%')
    .height('100%')
    .onStateChange((refreshStatus: RefreshStatus) => {
      ToolsHelper.log('Refresh onStatueChange state is ' + refreshStatus)
    })
    .onRefreshing(() => {
      this.onRefresh && this.onRefresh()
    })
  }
}