鸿蒙实战开发教程-怎样实现上拉加载和下拉革新

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

首先使用ohpm安装PullToRefresh：

1. ohpm install @ohos/pulltorefresh

复制代码

用法和常用参数：

1. PullToRefresh({
2.         // 必传项，列表组件所绑定的数据
3.         data: $newsData,
4.         // 必传项，需绑定传入主体布局内的列表或宫格组件
5.         scroller: this.scroller,
6.         // 必传项，自定义主体布局，内部有列表或宫格组件
7.         customList: () => {
8.           // 一个用@Builder修饰过的UI方法
9.         },
10.         // 可选项，下拉刷新回调
11.         onRefresh: () => {
12.    
13.         },
14.         // 可选项，上拉加载更多回调
15.         onLoadMore: () => {
16.    
17.         },
18.       })

复制代码

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

1. import { PullToRefresh } from '@ohos/pulltorefresh'
2. import util from '@ohos.util';
3. @Entry
4. @Component
5. struct Index {
6.   // 需绑定列表或宫格组件
7.   private scroller: Scroller = new Scroller();
8.   @State newsData: NewsData[] = []
10.   onPageShow(): void {
11.     this.getData('news.json')
12.   }
14.   getData(contentFile:string){
15.     let data = getContext(this).resourceManager.getRawFileContent(contentFile,(err,value)=> {
16.       let view: Uint8Array = new Uint8Array(value); // 使用Uint8Array读取arrayBuffer的数据
17.       let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类
18.       let res: string = textDecoder.decodeWithStream(view); // 对view解码
19.       let strArr:object[] = JSON.parse(res)
20.       let list:object[] = strArr['data']['list'];
21.       for (let i = 0; i < list.length; i++) {
22.         const contactTemp = new NewsData(list[i]['title'], list[i]['time'],list[i]['pic']);
23.         this.newsData.push(contactTemp);
24.       }
25.     })
26.   }
28.   build() {
29.     Row() {
31.       PullToRefresh({
32.         // 必传项，列表组件所绑定的数据
33.         data: $newsData,
34.         // 必传项，需绑定传入主体布局内的列表或宫格组件
35.         scroller: this.scroller,
36.         // 必传项，自定义主体布局，内部有列表或宫格组件
37.         customList: () => {
38.           // 一个用@Builder修饰过的UI方法
39.           this.getListView();
40.         },
41.         // 可选项，下拉刷新回调
42.         onRefresh: () => {
43.           return new Promise<string>((resolve, reject) => {
44.             // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
45.             setTimeout(() => {
46.               resolve('刷新成功');
47.               this.newsData = [];
48.               this.getData('news.json')
49.             }, 2000);
50.           });
51.         },
52.         // 可选项，上拉加载更多回调
53.         onLoadMore: () => {
54.           return new Promise<string>((resolve, reject) => {
55.             // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
56.             setTimeout(() => {
57.               resolve('');
58.               this.getData('newsmore.json')
59.             }, 2000);
60.           });
61.         },
62.         customLoad: null,
63.         customRefresh: null,
64.       })
65.     }
66.     .height('100%')
67.   }
69.   // 必须使用@Builder修饰方法
70.   @Builder
71.   private getListView() {
72.     List({
73.       space: 3, scroller: this.scroller
74.     }) {
75.       ForEach(this.newsData, (item: NewsData,index) => {
76.         ListItem() {
77.           Row(){
78.             Image(item.newsPic)
79.               .width(80)
80.               .height(80)
81.             Column(){
82.               Text(item.newsTitle)
83.                 .fontSize(18)
84.                 .fontColor(Color.Black)
85.               Text(item.newsTime)
86.                 .fontSize(16)
87.                 .fontColor(Color.Gray)
88.             }
89.             .padding({top:10,bottom:10})
90.             .margin({left:10})
91.             .justifyContent(FlexAlign.SpaceBetween)
92.             .height(90)
93.             .alignItems(HorizontalAlign.Start)
94.           }
95.           .height(90)
96.           .padding({left:10,right:30,top:5,bottom:5})
97.           .width('100%')
98.         }
99.         .height(90)
100.       }, (item: NewsData, index?: number) => JSON.stringify(item) + index);
101.     }
102.     .divider({ strokeWidth: 0.5, color: Color.Gray, startMargin: 20, endMargin: 0 })
103.     .width('100%')
104.     .backgroundColor('#f1f3f5')
105.     // TODO: 知识点：必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。
106.     .edgeEffect(EdgeEffect.None)
107.   }
109.   aboutToDisappear() {
110.     this.newsData = [];
111.   }
112. }
114. // 新闻数据对象
115. class NewsData {
116.   newsTitle: string
117.   newsTime: string
118.   newsPic: string
120.   constructor( newsTitle: string, newsTime: string, newsPic: string) {
121.     this.newsTitle = newsTitle;
122.     this.newsTime = newsTime;
123.     this.newsPic = newsPic;
124.   }
125. }

复制代码

假如大家还没有把握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所资助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步调：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

怎样快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.设置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。