HarmonyOS-下拉刷新

方式一：使用List、ListItem

  @State isRefreshing: boolean = false;
  @State list: Array<string> = [];
  private currentOffsetY: number = 0;
  private timer: number = 0;
  private MAX_OFFSET_Y: number = 120;
  private counter = 0;
  
  build() {
    Column() {
      Column() {
        if (this.isRefreshing) {
          this.RefreshUI()
        }
        List() {
          ForEach(this.list, (item: string) => {
            ListItem() {
                Text(item)
                  .padding({left: 5, right: 5, top: 10, bottom: 10})
            }
          })
        }
        .padding(12)
        .height('100%').width('100%')
        .divider({
          strokeWidth: 1, color: Color.Gray
        })
      }
      .layoutWeight(1)
      .size({ width: '100%', height: '100%' })
      .padding({ bottom: 10})
      .onTouch((event?: TouchEvent) => {
        this.pullDownTouch(event);
      })
    }.size({ width: '100%', height: '100%' })
  }

  @Builder RefreshUI() {
    Row() {
      LoadingProgress().width(40).height(40).color('#FF000000')
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(40)
  }

  private pullDownTouch(event?: TouchEvent): void {
    if (event === undefined) {
      console.error('event type undefined')
      return;
    }
    switch (event.type) {
      case TouchType.Down:
        this.currentOffsetY = event.touches[0].y;
        break;
      case TouchType.Move:
        this.isRefreshing = event.touches[0].y - this.currentOffsetY > this.MAX_OFFSET_Y;
        break;
      case TouchType.Up:
        let refreshing = this.isRefreshing;
        if (refreshing) {
          this.firstFlag = false;
        }
        if (this.timer) clearTimeout(this.timer)

        this.timer = setTimeout(() => {
          if (refreshing) {
            this.isRefreshing = false;
            this.list.splice(0, 0, {name: "Test." + (this.counter++)})
          }
        }, 1500);
        break;
    }
  }      

方式二：使用Scroll

  build() {
    Column() {
      Column() {
        if (this.isRefreshing) {
          this.RefreshUI()
        }
        Scroll() {
	        Column() {
	          if (this.isRefreshing) {
	            this.RefreshUI()
	          }
	          ForEach(this.list, (item: string) => {
	            Text(item)
                  .padding({left: 5, right: 5, top: 10, bottom: 10})
	          })
        }
        .backgroundColor(Color.Gray)
        .padding(12)
        .width('100%')
        Column(){}
      }
      .backgroundColor(Color.Orange)
      .align(Alignment.Top)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .size({ width: '100%', height: '100%' })
      .padding({ bottom: 10})
      .layoutWeight(1)
      .onTouch((event?: TouchEvent) => {
        this.pullDownTouch(event);
      })
    }.size({ width: '100%', height: '100%' })
  }