HarmonyOS开发之（下拉刷新，上拉加载）控件pulltorefresh组件的使用
效果图：
一：下载安装（地址：OpenHarmony-SIG/PullToRefresh）
ohpm install @ohos/pulltorefresh二：使用lazyForEarch的数据作为数据源
export 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) {
console.info('add listener')
this.listeners.push(listener)
}
}
// 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
console.info('remove listener')
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)
})
}
}export class MyDataNewSource 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=[]
}
}三：快速使用
import router from '@ohos.router';
import { dateList } from '../model/wallpaperBeanList';
import weatherApi from '../DbUtils/WeatherApi';
import { MyDataNewSource} from '../DbUtils/MyDataSource';
import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'
@Component
export struct WallpaperPage {
@State typeID: number = 0
@State wallpaperUrlList: dateList [] = []
dataSource: MyDataNewSource = new MyDataNewSource()
// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller()
timer: null | number = null
private currentPage: number = 1;//当前页码
private pageSize: number = 12; // 默认加载数量
private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator();
aboutToAppear() {
this.refreshConfigurator
.setHasRefresh(true)// 是否具有下拉刷新功能
.setHasLoadMore(true)// 是否具有上拉加载功能
.setMaxTranslate(150)// 可下拉上拉的最大距离
.setSensitivity(1)// 下拉上拉灵敏度
.setListIsPlacement(false)// 滑动结束后列表是否归位
.setAnimDuration(300)// 滑动结束后，回弹动画执行时间
.setRefreshHeight(50)// 下拉动画高度
.setRefreshColor('#638EEF')// 下拉动画颜色
.setRefreshBackgroundColor($r('app.color.home_bg'))// 下拉动画区域背景色
.setRefreshTextColor('#638EEF')// 下拉加载完毕后提示文本的字体颜色
.setRefreshTextSize(15)// 下拉加载完毕后提示文本的字体大小
.setRefreshAnimDuration(1000)// 下拉动画执行一次的时间
.setLoadImgHeight(50)// 上拉图片高度
.setLoadBackgroundColor($r('app.color.home_bg'))// 上拉动画区域背景色
.setLoadTextColor('#638EEF')// 上拉文本的字体颜色
.setLoadTextSize(15)// 上拉文本的字体大小
.setLoadTextPullUp1('请继续上拉...')// 上拉1阶段文本
.setLoadTextPullUp2('释放即可刷新')// 上拉2阶段文本
.setLoadTextLoading('加载中...') // 上拉加载更多中时的文本
// .setRefreshCompleteTextHoldTime(500) //上拉刷新后停留的时间, 默认一秒, 建议设置500
this.fetchWallpapers(this.currentPage)
}
//根据当前页面查找数据源(typeID=>类型id)
private fetchWallpapers(pageNum: number = 1) {
weatherApi.wallpaperList(this.typeID, pageNum, this.pageSize).then(wallpaperListBean => {
this.wallpaperUrlList = wallpaperListBean.data.list // Assuming your API structure
this.dataSource.clear() // Clear the old data
for (let index = 0; index < this.wallpaperUrlList.length; index++) {
this.dataSource.pushData(this.wallpaperUrlList[index].imgUrl)
}
}).catch(error => {
console.error("Error fetching wallpapers:", error)
})
}
build() {
Column() {
PullToRefresh({
// 必传项，需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项，自定义主体布局，内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView()
},
refreshConfigurator:this.refreshConfigurator,
mWidth:'100%',
mHeight:'100%',
// 可选项，下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
this.fetchWallpapers(1) // Fetch first page data
this.currentPage = 1 // Reset the page count
this.timer = setTimeout(() => {
resolve('刷新成功')
console.log(' 刷新成功')
}, 2000)
})
},
// 可选项，上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
this.currentPage++; // Increment the page number
this.fetchWallpapers(this.currentPage); // Fetch the next page of data
this.timer = setTimeout(() => {
resolve('上拉加载完成')
console.log('上拉加载完成')
}, 2000)
})
},
customLoad: null,
customRefresh: null,
})
}
.width('100%')
.height('100%')
}
@Builder
private getListView() {
Grid(this.scroller) {
LazyForEach(this.dataSource, (item, index) => {
GridItem() {
// 显示网络图片
Image(item || $r('app.color.color_white_f0f8'))
.width('100%')
.height('20%')
.alt($r('app.color.color_white_f0f8'))
.borderRadius(8)
.onAppear(() => { //组件挂载显示触发
if (index) {
console.log("Loading onAppear: index=" + item + ' content= ' + this.dataSource.getData(index));
}
})
.onDisAppear(() => { //组件卸载载显示触发
if (index) {
console.log("Loading onDisAppear: index=" + index + ' content= ' + this.dataSource.getData(index));
}
})
.onClick(() => this.handleImageClick(item)); // 注册点击事件
}
}, (item: string) => item)
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(15)
.rowsGap(10)
.cachedCount(10)
.margin({top:15})
.layoutDirection(GridDirection.Row)
.width('90%')
.height('100%')
}
aboutToDisappear() {
clearTimeout(this.timer)
this.dataSource.clear()
}
// 处理点击事件
handleImageClick(imageUrl: string) {
router.pushUrl({
url: "pages/WallpaperDetailsPage",
params: {
imageUrl: imageUrl
}
})
}
}注意：在api9 开发的时候注意以下两点
1，依赖PullToRefresh 中
@Link data: Object[] 改==》 @State data: Object[]=[];
不然使用的时候PullToRefresh 会报：'@Link' decorated 'data' must be initialized through the component constructor. <ArkTSCheck>
2，同样的在PullToRefresh中找到 this.scroller.isAtEnd()，注释掉，api9 中找不到 this.scroller.isAtEnd()方法