鸿蒙实战开发教程-如何实现上拉加载和下拉刷新_业界新闻

发布时间:2024-08-04 06:54

阅读量:0

本文介绍的是一个优秀的第三方库PullToRefresh，并使用它实现列表的上拉加载和下拉刷新。

先上个效果图：

首先使用ohpm安装PullToRefresh：

ohpm install @ohos/pulltorefresh

用法和常用参数：

PullToRefresh({         // 必传项，列表组件所绑定的数据         data: $newsData,         // 必传项，需绑定传入主体布局内的列表或宫格组件         scroller: this.scroller,         // 必传项，自定义主体布局，内部有列表或宫格组件         customList: () => {           // 一个用@Builder修饰过的UI方法         },         // 可选项，下拉刷新回调         onRefresh: () => {             },         // 可选项，上拉加载更多回调         onLoadMore: () => {             },       })

下面是效果图的全部实现代码，列表数据来自本地json文件：

import { PullToRefresh } from '@ohos/pulltorefresh' import util from '@ohos.util'; @Entry @Component struct Index {   // 需绑定列表或宫格组件   private scroller: Scroller = new Scroller();   @State newsData: NewsData[] = []    onPageShow(): void {     this.getData('news.json')   }    getData(contentFile:string){     let data = getContext(this).resourceManager.getRawFileContent(contentFile,(err,value)=> {       let view: Uint8Array = new Uint8Array(value); // 使用Uint8Array读取arrayBuffer的数据       let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类       let res: string = textDecoder.decodeWithStream(view); // 对view解码       let strArr:object[] = JSON.parse(res)       let list:object[] = strArr['data']['list'];       for (let i = 0; i < list.length; i++) {         const contactTemp = new NewsData(list[i]['title'], list[i]['time'],list[i]['pic']);         this.newsData.push(contactTemp);       }     })   }    build() {     Row() {        PullToRefresh({         // 必传项，列表组件所绑定的数据         data: $newsData,         // 必传项，需绑定传入主体布局内的列表或宫格组件         scroller: this.scroller,         // 必传项，自定义主体布局，内部有列表或宫格组件         customList: () => {           // 一个用@Builder修饰过的UI方法           this.getListView();         },         // 可选项，下拉刷新回调         onRefresh: () => {           return new Promise<string>((resolve, reject) => {             // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据             setTimeout(() => {               resolve('刷新成功');               this.newsData = [];               this.getData('news.json')             }, 2000);           });         },         // 可选项，上拉加载更多回调         onLoadMore: () => {           return new Promise<string>((resolve, reject) => {             // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据             setTimeout(() => {               resolve('');               this.getData('newsmore.json')             }, 2000);           });         },         customLoad: null,         customRefresh: null,       })     }     .height('100%')   }    // 必须使用@Builder修饰方法   @Builder   private getListView() {     List({       space: 3, scroller: this.scroller     }) {       ForEach(this.newsData, (item: NewsData,index) => {         ListItem() {           Row(){             Image(item.newsPic)               .width(80)               .height(80)             Column(){               Text(item.newsTitle)                 .fontSize(18)                 .fontColor(Color.Black)               Text(item.newsTime)                 .fontSize(16)                 .fontColor(Color.Gray)             }             .padding({top:10,bottom:10})             .margin({left:10})             .justifyContent(FlexAlign.SpaceBetween)             .height(90)             .alignItems(HorizontalAlign.Start)           }           .height(90)           .padding({left:10,right:30,top:5,bottom:5})           .width('100%')         }         .height(90)       }, (item: NewsData, index?: number) => JSON.stringify(item) + index);     }     .divider({ strokeWidth: 0.5, color: Color.Gray, startMargin: 20, endMargin: 0 })     .width('100%')     .backgroundColor('#f1f3f5')     // TODO: 知识点：必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。     .edgeEffect(EdgeEffect.None)   }    aboutToDisappear() {     this.newsData = [];   } }  // 新闻数据对象 class NewsData {   newsTitle: string   newsTime: string   newsPic: string    constructor( newsTitle: string, newsTime: string, newsPic: string) {     this.newsTitle = newsTitle;     this.newsTime = newsTime;     this.newsPic = newsPic;   } }