介紹
本示例介紹使用第三方庫的PullToRefresh組件實(shí)現(xiàn)列表的下拉刷新數(shù)據(jù)和上滑加載后續(xù)數(shù)據(jù)。
效果圖預(yù)覽
使用說明
- 進(jìn)入頁面上沐，下拉列表觸發(fā)刷新數(shù)據(jù)事件，等待數(shù)據(jù)刷新完成。
- 上滑列表到底部，觸發(fā)加載更多數(shù)據(jù)事件她我，等待數(shù)據(jù)加載完成疏哗。
實(shí)現(xiàn)思路
- 使用第三方庫pullToRefresh組件，將列表組件膀哲、綁定的數(shù)據(jù)對象和scroller對象包含進(jìn)去焚志，并添加上滑與下拉方法佃迄。源碼參考PullToRefreshNews.ets
PullToRefresh({
// 必傳項(xiàng)，列表組件所綁定的數(shù)據(jù)
data: $newsData,
// 必傳項(xiàng)，需綁定傳入主體布局內(nèi)的列表或?qū)m格組件
scroller: this.scroller,
// 必傳項(xiàng)表箭，自定義主體布局凤覆，內(nèi)部有列表或?qū)m格組件
customList: () => {
// 一個(gè)用@Builder修飾過的UI方法
this.getListView();
},
// 下拉刷新回調(diào)
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
...
});
},
// 上滑加載回調(diào)
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
...
});
},
customLoad: null,
customRefresh: null,
})
- 使用LazyForEach循環(huán)渲染列表。源碼參考PullToRefreshNews.ets
LazyForEach(this.newsData, (item: NewsData) => {
ListItem() {
...
}
});
高性能知識(shí)點(diǎn)
不涉及
工程結(jié)構(gòu)&模塊類型
pulltorefreshnews // har類型
|---pages
|---|---PullToRefreshNews.ets // 視圖層-場景列表頁面
模塊依賴
參考資料
@ohos/PullToRefresh
@ohos/LazyForEach
PullToRefresh第三方庫
鴻蒙開發(fā)學(xué)習(xí)路線：https://qr21.cn/FV7h05
鴻蒙開發(fā)面試題庫：https://qr18.cn/F781PH
