HarmonyOS NEXT應用開發之下拉重新整理與上滑載入案例

生活就是这么怪發表於2024-04-19

介紹

本示例介紹使用第三方庫的PullToRefresh元件實現列表的下拉重新整理資料和上滑載入後續資料。

效果圖預覽

image

使用說明

  1. 進入頁面，下拉選單觸發重新整理資料事件，等待資料重新整理完成。
  2. 上滑列表到底部，觸發載入更多資料事件，等待資料載入完成。

實現思路

  1. 使用第三方庫pullToRefresh元件，將列表元件、繫結的資料物件和scroller物件包含進去，並新增上滑與下拉方法。原始碼參考PullToRefreshNews.ets
PullToRefresh({
  // 必傳項，列表元件所繫結的資料
  data: $newsData,
  // 必傳項，需繫結傳入主體佈局內的列表或宮格元件
  scroller: this.scroller,
  // 必傳項，自定義主體佈局，內部有列表或宮格元件
  customList: () => {
    // 一個用@Builder修飾過的UI方法
    this.getListView();
  },
  // 下拉重新整理回撥
  onRefresh: () => {
    return new Promise<string>((resolve, reject) => {
      ...
    });
  },
  // 上滑載入回撥
  onLoadMore: () => {
    return new Promise<string>((resolve, reject) => {
      ...
    });
  },
  customLoad: null,
  customRefresh: null,
})
  1. 使用LazyForEach迴圈渲染列表。原始碼參考PullToRefreshNews.ets
LazyForEach(this.newsData, (item: NewsData) => {
  ListItem() {
    ...
  }
});

高效能知識點

不涉及

工程結構&模組型別

pulltorefreshnews                                  // har型別
|---pages
|---|---PullToRefreshNews.ets                      // 檢視層-場景列表頁面

模組依賴

@ohos/PullToRefresh

參考資料

@ohos/PullToRefresh
@ohos/LazyForEach
PullToRefresh第三方庫

鴻蒙開發學習路線：https://qr21.cn/FV7h05

鴻蒙開發面試題庫：https://qr18.cn/F781PH

相關文章