diff --git a/README.md b/README.md index e534fbb0194c0a1751384c93259d801fda5bfadc..65494b63c8f34e07afd79719dacd47d30a76cdae 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ## 简介 > PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。 -> 支持设置内置动画的各种属性，支持设置自定义动画。 +> 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。 #### 效果展示： @@ -63,7 +63,40 @@ customRefresh: null, ``` 设置属性示例和设置自定义动画示例请看[示例entry](https://gitee.com/openharmony-sig/PullToRefresh/tree/master/entry/src/main/ets/pages) - +### 支持lazyForEarch的数据作为数据源 + LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用 + **接口描述：** +```typescript +LazyForEach( + dataSource: IDataSource, // 需要进行数据迭代的数据源 + itemGenerator: (item: any, index?: number) => void, // 子组件生成函数 + keyGenerator?: (item: any, index?: number) => string // 键值生成函数 +): void +``` +**IDataSource类型说明** +```typescript +interface IDataSource { + totalCount(): number; // 获得数据总数 + getData(index: number): Object; // 获取索引值对应的数据 + registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器 + unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器 +} +``` +**DataChangeListener类型说明** +```typescript +interface DataChangeListener { + onDataReloaded(): void; // 重新加载数据时调用 + onDataAdded(index: number): void; // 添加数据时调用 + onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用 + onDataDeleted(index: number): void; // 删除数据时调用 + onDataChanged(index: number): void; // 改变数据时调用 + onDataAdd(index: number): void; // 添加数据时调用 + onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用 + onDataDelete(index: number): void; // 删除数据时调用 + onDataChange(index: number): void; // 改变数据时调用 +} +``` +具体使用请看 openharmony：[LazyForEach：数据懒加载](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/) ## 属性（接口）说明 ### PullToRefresh组件属性 diff --git a/entry/src/main/ets/pages/lazyForEachGuide.ets b/entry/src/main/ets/pages/lazyForEachGuide.ets index 716971644a2e195148ba8fa55cfbb66171fd165e..e0d8225a1ecb23bb89a7602f306f8a4a87c77fd4 100644 --- a/entry/src/main/ets/pages/lazyForEachGuide.ets +++ b/entry/src/main/ets/pages/lazyForEachGuide.ets @@ -15,22 +15,20 @@ import { PullToRefresh} from '@ohos/pulltorefresh' class BasicDataSource implements IDataSource{ private listeners: DataChangeListener[] = new Array(); - public totalCount(): number { return 0; } - public getData(index: number): Object { return index; } - + // 为LazyForEach组件向其数据源处添加listener监听 registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { console.info('add listener'); this.listeners.push(listener); } } - + // 为对应的LazyForEach组件在数据源处去除listener监听 unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { @@ -38,25 +36,25 @@ class BasicDataSource implements IDataSource{ this.listeners.splice(pos, 1); } } - + // 通知LazyForEach组件需要重载所有子组件 notifyDataReload(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }) } - + // 通知LazyForEach组件需要在index对应索引处添加子组件 notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); }) } - + // 通知LazyForEach组件需要在index对应索引处添加子组件 notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); }) } - + // 通知LazyForEach组件需要在index对应索引处删除该子组件 notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); @@ -72,35 +70,37 @@ class BasicDataSource implements IDataSource{ class MyDataSource extends BasicDataSource { private dataArray: string[] = []; - public totalCount(): number { return this.dataArray.length; } - public getData(index: number): Object { return this.dataArray[index]; } - public addData(index: number, data: string): void { this.dataArray.splice(index, 0, data); this.notifyDataAdd(index); } - public pushData(data: string): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); } + public clear():void{ + this.dataArray = []; + } } - @Entry @Component struct MyComponent { - @State refreshText: string = ''; @State data: MyDataSource = new MyDataSource(); // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); - + private timer:null|number=null; + aboutToAppear() { + for (let i = 1; i <= 20; i++) { + this.data.pushData(`Hello ${i}`); + } + } build() { Column() { PullToRefresh({ @@ -117,10 +117,10 @@ struct MyComponent { onRefresh: () => { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 - setTimeout(() => { + this.timer = setTimeout(() => { resolve('刷新成功'); - console.log('dodo 刷新成功'); - this.data.addData(0,'ADD HEAD 0') + console.log(' 刷新成功'); + this.data.addData(0,'ADD HEAD 0'); }, 2000); }); }, @@ -128,10 +128,10 @@ struct MyComponent { onLoadMore: () => { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 - setTimeout(() => { + this.timer=setTimeout(() => { resolve(''); - console.log('dodo 上拉加载完成'); - this.data.pushData(`Hello ${this.data.totalCount()}`) + console.log('上拉加载完成'); + this.data.pushData(`Hello ${this.data.totalCount()}`); }, 2000); }); }, @@ -148,29 +148,30 @@ struct MyComponent { ListItem() { Row() { Text(item).fontSize(50) + //组件挂载显示触发 .onAppear(() => { if(index){ - console.log("dodo onAppear: index="+index + ' content= ' +this.data.getData(index) ) + console.log(" onAppear: index="+index + ' content= ' +this.data.getData(index) ); } }) + //组件卸载载显示触发 .onDisAppear(()=>{ if(index) { - console.log("dodo onDisAppear: index=" + index + ' content= ' + this.data.getData(index)) + console.log(" onDisAppear: index=" + index + ' content= ' + this.data.getData(index)); } }) }.margin({ left: 10, right: 10 }) } - }, (item: string) => item) + }, (item: string) => item); }.cachedCount(5) .backgroundColor('#eeeeee') .divider({ strokeWidth: 1, color: 0x222222 }) .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果 } - - aboutToAppear() { - for (let i = 100; i >= 80; i--) { - this.data.pushData(`Hello ${i}`) - } + aboutToDisappear() { + clearTimeout(this.timer); + this.data.clear(); } + } \ No newline at end of file