介紹
本示例介紹使用第三方庫的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ù)對(duì)象和scroller對(duì)象包含進(jìn)去粗仓，并添加上滑與下拉方法巴碗。
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)渲染列表燃少。
LazyForEach(this.newsData, (item: NewsData) => {
ListItem() {
...
}
});
高性能知識(shí)點(diǎn)
不涉及
工程結(jié)構(gòu)&模塊類型
pulltorefreshnews // har類型
|---pages
|---|---PullToRefreshNews.ets // 視圖層-場(chǎng)景列表頁面
寫在最后
如果你覺得這篇內(nèi)容對(duì)你還蠻有幫助，我想邀請(qǐng)你幫我三個(gè)小忙：
- 點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力。
- 關(guān)注小編庸毫，同時(shí)可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識(shí)。
- 想要獲取更多完整鴻蒙最新學(xué)習(xí)知識(shí)點(diǎn)，請(qǐng)移步前往小編：
https://gitee.com/MNxiaona/733GH/blob/master/jianshu
