簡介

PullToRefresh是一款OpenHarmony環(huán)境下可用的下拉刷新吁系、上拉加載組件。
支持設(shè)置內(nèi)置動畫的各種屬性白魂，支持設(shè)置自定義動畫汽纤，支持lazyForEarch的數(shù)據(jù)作為數(shù)據(jù)源。

效果展示：

內(nèi)置動畫效果

下載安裝

ohpm install @ohos/pulltorefresh

使用說明

快速使用

import { PullToRefresh } from '@ohos/pulltorefresh'

// 需綁定列表或?qū)m格組件
private scroller: Scroller = new Scroller();
  
PullToRefresh({
// 必傳項福荸，列表組件所綁定的數(shù)據(jù)
data: $data,
// 必傳項蕴坪，需綁定傳入主體布局內(nèi)的列表或?qū)m格組件
scroller: this.scroller,
// 必傳項，自定義主體布局敬锐，內(nèi)部有列表或?qū)m格組件
customList: () => {
  // 一個用@Builder修飾過的UI方法
  this.getListView();
},
// 可選項背传，下拉刷新回調(diào)
onRefresh: () => {
  return new Promise<string>((resolve, reject) => {
    // 模擬網(wǎng)絡(luò)請求操作，請求網(wǎng)絡(luò)2秒后得到數(shù)據(jù)台夺，通知組件径玖，變更列表數(shù)據(jù)
    setTimeout(() => {
      resolve('刷新成功');
      this.data = this.dataNumbers;
    }, 2000);
  });
},
// 可選項，上拉加載更多回調(diào)
onLoadMore: () => {
  return new Promise<string>((resolve, reject) => {
    // 模擬網(wǎng)絡(luò)請求操作颤介，請求網(wǎng)絡(luò)2秒后得到數(shù)據(jù)梳星，通知組件，變更列表數(shù)據(jù)
    setTimeout(() => {
      resolve('');
      this.data.push("增加的條目" + this.data.length);
    }, 2000);
  });
},
customLoad: null,
customRefresh: null,
})

其中List組件需要設(shè)置edgeEffect屬性為(EdgeEffect.None)

設(shè)置屬性示例和設(shè)置自定義動畫示例請看示例entry

支持lazyForEarch的數(shù)據(jù)作為數(shù)據(jù)源

LazyForEach從提供的數(shù)據(jù)源中按需迭代數(shù)據(jù)滚朵，并在每次迭代過程中創(chuàng)建相應(yīng)的組件冤灾。當LazyForEach在滾動容器中使用了，框架會根據(jù)滾動容器可視區(qū)域按需創(chuàng)建組件辕近，當組件滑出可視區(qū)域外時韵吨，框架會進行組件銷毀回收以降低內(nèi)存占用
接口描述：

LazyForEach(
    dataSource: IDataSource,             // 需要進行數(shù)據(jù)迭代的數(shù)據(jù)源
    itemGenerator: (item: any, index?: number) => void,  // 子組件生成函數(shù)
    keyGenerator?: (item: any, index?: number) => string // 鍵值生成函數(shù)
): void

IDataSource類型說明

interface IDataSource {
    totalCount(): number; // 獲得數(shù)據(jù)總數(shù)
    getData(index: number): Object; // 獲取索引值對應(yīng)的數(shù)據(jù)
    registerDataChangeListener(listener: DataChangeListener): void; // 注冊數(shù)據(jù)改變的監(jiān)聽器
    unregisterDataChangeListener(listener: DataChangeListener): void; // 注銷數(shù)據(jù)改變的監(jiān)聽器
}

DataChangeListener類型說明

interface DataChangeListener {
    onDataReloaded(): void; // 重新加載數(shù)據(jù)時調(diào)用
    onDataAdded(index: number): void; // 添加數(shù)據(jù)時調(diào)用
    onDataMoved(from: number, to: number): void; // 數(shù)據(jù)移動起始位置與數(shù)據(jù)移動目標位置交換時調(diào)用
    onDataDeleted(index: number): void; // 刪除數(shù)據(jù)時調(diào)用
    onDataChanged(index: number): void; // 改變數(shù)據(jù)時調(diào)用
    onDataAdd(index: number): void; // 添加數(shù)據(jù)時調(diào)用
    onDataMove(from: number, to: number): void; // 數(shù)據(jù)移動起始位置與數(shù)據(jù)移動目標位置交換時調(diào)用
    onDataDelete(index: number): void; // 刪除數(shù)據(jù)時調(diào)用
    onDataChange(index: number): void; // 改變數(shù)據(jù)時調(diào)用
}

具體使用請看 openharmony：LazyForEach：數(shù)據(jù)懶加載

屬性（接口）說明

PullToRefresh組件屬性

PullToRefreshConfigurator類接口

約束與限制

在下述版本驗證通過：

• DevEco Studio: 4.1 Canary(4.1.3.317), SDK: API11 (4.1.0.36)
• DevEco Studio: 4.0 (4.0.3.512), SDK: API10 (4.0.10.9)
• DevEco Studio: 4.0 Canary2(4.0.3.300), SDK: API10 (4.0.8.6)

寫在最后

如果你覺得這篇內(nèi)容對你還蠻有幫助学赛，我想邀請你幫我三個小忙：

• 點贊，轉(zhuǎn)發(fā)吞杭，有你們的 『點贊和評論』盏浇，才是我創(chuàng)造的動力。
• 關(guān)注小編芽狗，同時可以期待后續(xù)文章ing??绢掰，不定期分享原創(chuàng)知識。
• 想要獲取更多完整鴻蒙最新學(xué)習(xí)知識點童擎，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu