#鸿蒙通关秘籍#HarmonyOS Next 下拉刷新组件如何自定义样式？

/**
 * 下拉刷新-自定义样式
 */
@Entry
@Component
struct PullRefresh {
  @State isRefreshing: boolean = false;
  @State promptText: string = '';
  @State refreshStatus: number = 0;
  @State list: number[] = [];
  @State lastTime: string = this.getDateTime();

  aboutToAppear(): void {
    this.getList();
  }

  getList() {
    setTimeout(() => {
      for (let i = 0; i < 20; i++) {
        this.list.push(i);
      }
      this.isRefreshing = false;
    }, 1000);
  }

  getDateTime() {
    let date = new Date();
    let month = date.getMonth().toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    let hour = date.getHours().toString().padStart(2, '0');
    let minus = date.getMinutes().toString().padStart(2, '0');
    return `${month}-${day} ${hour}:${minus}`;
  }

  @Builder customRefreshComponent() {
    Row({space:15}){
      if(this.refreshStatus===RefreshStatus.Drag){
        Image($r('app.media.arrow_down')).width(20);
      } else if(this.refreshStatus===RefreshStatus.OverDrag){
        Image($r('app.media.arrow_up')).width(20);
      } else if(this.refreshStatus===RefreshStatus.Refresh){
        Image($r('app.media.loading')).width(20).transition(
        TransitionEffect.rotate({ angle: -360 })
          .animation({ iterations: -1, curve: Curve.Linear, duration: 2000 }));
      }
      Column({space:3}){
        Text(this.promptText).fontSize(14).fontColor('#666').lineHeight(21);
        Text(`上次更新 ${this.lastTime}`).fontSize(11).fontColor('#808080');
      }
    }.width('100%').constraintSize({minHeight:50}).justifyContent(FlexAlign.Center);
  }

  build() {
    Refresh({ refreshing: $$this.isRefreshing, builder:this.customRefreshComponent() }) {
      List({space:20}){
        ForEach(this.list, (item: number) => {
          ListItem(){
            Text(item.toString());
          }
          .width('100%')
          .height(90)
          .backgroundColor('#fff')
          .borderRadius(10);
        }, (item: number) => item.toString());
      }
      .height('100%')
      .width('100%')
      .padding(20)
      .backgroundColor('#f2f2f2');
    }
    .refreshOffset(100)
    .onStateChange((state) => {
      this.refreshStatus = state;
      switch (state) {
        case RefreshStatus.Drag:
          this.promptText = '下拉可以刷新';
          break;
        case RefreshStatus.OverDrag:
          this.promptText = '释放立即刷新';
          break;
        case RefreshStatus.Refresh:
          this.promptText = "正在刷新...";
          this.getList();
          break;
        case RefreshStatus.Done:
          this.lastTime = this.getDateTime();
          break;
      }
    });
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.