效果展示:
添加组件依赖:“@ohos/pulltorefresh”: “^2.0.5”
数据准备
// 懒加载列表对象
class NewsDataSource extends BasicDataSource {
dataArray: Array<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 = [];
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
生产数据
监听
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = [];
public totalCount(): number {
return 0;
}
public getData(index: number): Object {
return index;
}
// 为LazyForEach组件向其数据源处添加listener监听
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener);
}
}
// 为对应的LazyForEach组件在数据源处去除listener监听
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
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);
})
}
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMove(from, to);
})
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
数据绑定
PullToRefresh({
data:$newsData,
// 必传项,需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// TODO: 知识点:设置onRefresh下拉刷新回调方法,该方法必须返回一个Promise类型。
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络1.5秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
this.newsData.clear();
for (let j = 0; j < NEWS_MOCK_DATA_COUNT*3; j++) {
this.newsData.pushData('~'+j*10);
}
resolve(NEWS_RESOLVE_SUCCESS)
}, NEWS_REFRESH_TIME);
});
},
// TODO: 知识点:设置onLoadMore上滑加载更多数据回调方法,该方法必须返回一个Promise类型。
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络1.5秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
for (let j = 0; j < NEWS_MOCK_DATA_COUNT; j++) {
this.newsData.pushData('%'+this.newsData.totalCount()+1);
}
resolve(NEWS_RESOLVE_SUCCESS)
}, NEWS_REFRESH_TIME);
});
},
customLoad: null,
customRefresh: null
})
.id('PullToRefresh')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
大致过程就是这样的了。
完整参考代码如下:
import { PullToRefresh } from '@ohos/pulltorefresh/index';
const NEWS_MOCK_DATA_COUNT: number = 8; // 每份模拟数据所含的新闻个数为8
const NEWS_RESOLVE_SUCCESS : string = '刷新成功';
const NEWS_REFRESH_TIME: number = 1500; // 数据刷新时间
@Entry
@Component
struct PullToRefreshPage {
@State message: string = 'Hello World';
@State newsData: NewsDataSource = new NewsDataSource();
// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller();
aboutToAppear() {
for (let j = 0; j < NEWS_MOCK_DATA_COUNT*3; j++) {
if(j%2==0){
this.newsData.pushData('~'+j);
}else{
this.newsData.pushData('+'+j);
}
}
}
// 必须使用@Builder修饰方法
@Builder
private getListView() {
List({
space: 3, scroller: this.scroller
}) {
// TODO: 性能知识点:使用懒加载组件渲染数据
LazyForEach(this.newsData, (item: string, index: number) => {
ListItem() {
Text(item)
.textAlign(TextAlign.Center)
.height('5%')
.width('100%')
.backgroundColor(index==undefined||index%3==0?Color.Gray:Color.Blue)
.fontColor(Color.White)
}
}, (item: string, index?: number) => JSON.stringify(item) + index);
}
// TODO: 知识点:必须设置列表为滑动到边缘无效果,否则无法触发pullToRefresh组件的上滑下拉方法。
.edgeEffect(EdgeEffect.None)
}
build() {
RelativeContainer() {
PullToRefresh({
data:$newsData,
// 必传项,需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// TODO: 知识点:设置onRefresh下拉刷新回调方法,该方法必须返回一个Promise类型。
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络1.5秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
this.newsData.clear();
for (let j = 0; j < NEWS_MOCK_DATA_COUNT*3; j++) {
this.newsData.pushData('~'+j*10);
}
resolve(NEWS_RESOLVE_SUCCESS)
}, NEWS_REFRESH_TIME);
});
},
// TODO: 知识点:设置onLoadMore上滑加载更多数据回调方法,该方法必须返回一个Promise类型。
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络1.5秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
for (let j = 0; j < NEWS_MOCK_DATA_COUNT; j++) {
this.newsData.pushData('%'+this.newsData.totalCount()+1);
}
resolve(NEWS_RESOLVE_SUCCESS)
}, NEWS_REFRESH_TIME);
});
},
customLoad: null,
customRefresh: null
})
.id('PullToRefresh')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = [];
public totalCount(): number {
return 0;
}
public getData(index: number): Object {
return index;
}
// 为LazyForEach组件向其数据源处添加listener监听
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener);
}
}
// 为对应的LazyForEach组件在数据源处去除listener监听
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
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);
})
}
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMove(from, to);
})
}
}
// 懒加载列表对象
class NewsDataSource extends BasicDataSource {
dataArray: Array<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 = [];
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.