鸿蒙-下拉刷新控件PullToRefresh使用

DevEco Studio 版本：DevEco Studio NEXT Developer Preview2
HarmonyOS API 版本：4.1.0(11)
PullToRefresh 版本："@ohos/pulltorefresh": "2.0.5"

下拉刷新控件 PullToRefresh 使用

• 支持自定义 header，footer
• 没有更多了布局

具体代码如下：

import { HomeVM } from '../vm/HomeVM';
import { PullToRefresh } from '@ohos/pulltorefresh';

@Component
export struct ListAreaComponent {
  @State data?: ListDataWrapper[] | null = null
  private vm: HomeVM = new HomeVM()
  // 需绑定列表或宫格组件
  private scroller: Scroller = new Scroller();

  aboutToAppear(): void {
    // request data.
    this.vm.requestData().then((data: ListDataWrapper[]) => {
      this.data = data;
    })
  }

  build() {
    PullToRefresh({
      // 必传项，列表组件所绑定的数据
      data: this.data,
      // 必传项，需绑定传入主体布局内的列表或宫格组件
      scroller: this.scroller,
      // 必传项，自定义主体布局，内部有列表或宫格组件
      customList: () => {
        // 一个用@Builder修饰过的UI方法
        this.getListView()
      },
      // 可选项，下拉刷新回调
      onRefresh: () => {
        return new Promise<string>((resolve) => {
          this.vm.requestData().then((data: ListDataWrapper[]) => {
            this.data = data
            resolve('')
          }).catch((error: Error) => {
            resolve('')
          });
        });
      },
      // 可选项，上拉加载更多回调
      onLoadMore: () => {
        return new Promise<string>((resolve) => {
          resolve('')
        });
      },
      customLoad: commonNoMore,
      customRefresh: commonLoading,
    })
      .width('100%')
      .height('100%')
  }

  @Builder
  getListView() {
    List({ space: 12, scroller: this.scroller }) {
      ForEach(this.data, (item: ListDataWrapper, index: number) => {
        ListItem() {
          // ...
        };
      }, (item: ListDataWrapper, index?: number) => index + JSON.stringify(item));
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
  }
}


@Builder
export function commonLoading(): void {
  Stack() {
    // Text(refreshText)
    //   .textAlign(TextAlign.Center)
    // .fontColor( 0)
    // .fontSize( 0)
    Stack() {
      Canvas(new CanvasRenderingContext2D(new RenderingContextSettings(true)))
        .width('100%')
        .height('100%')
        .onReady(() => {
          // this.initCanvas();
        }) // .visibility(this.state == IS_PULL_DOWN_2 ? Visibility.Visible : Visibility.Hidden)
      // .visibility(Visibility.Hidden)
      LoadingProgress()
        .color('#FF00A3FF')
        .width(32)
        .height(32)
    }
    .width('100%')
    .height('100%')
  }
  .width('100%')
  .height('100%')
  .clip(true)
}

@Builder
export function commonNoMore(): void {
  Stack() {
    Text('已经到底了～')
      .textAlign(TextAlign.Center)
      .fontColor('#FF85888F')
      .fontSize(14)
  }
  .width('100%')
  .height('100%')
  .clip(true)
}

@Builder
export function commonEmpty(): void {
  Stack()
    .width('100%')
    .height('100%')
}

注意，列表组件需要设置为无边缘效果:List().edgeEffect(EdgeEffect.None)。

参考

https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh