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

介紹

本示例介紹使用第三方庫的PullToRefresh組件實現列表的下拉刷新數據和上滑載入後續數據。

效果圖預覽

使用說明

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,
})

2. 使用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