【鸿蒙实战开发】数据的下拉革新与上拉加载

本章介绍

本章主要介绍 ArkUI 开发中最常用的场景下拉革新, 上拉加载，在本章中介绍的内容在实际开发过程当中会高频的使用,以是同砚们要牢记本章的内容。下面就让我们开始本日的讲授吧！
List 组件

在 ArkUI 中List容器组件也可以实现数据滚动的效果， 这里为什么先介绍 List 组件，因为在本章节介绍的下拉革新和上拉加载用到了从此组件，以是一起讲授一下。
语法

1. List(){
2.   ListItem(){
3.    
4.   }
5. }

复制代码

  留意: 在 List 组件中必须包含 ListItem 子组件才能正常渲染数据，可以明白为每一个 ListItem 对应的就是一条数据。
  示例

1. @Entry
2. @Component
3. struct ListDemoPage {
4.   build() {
5.     Column() {
6.       List() {
7.         ListItem() {
8.           Row() {
9.             Text('测试数据 List')
10.           }
11.           .padding(10)
12.           .width('100%')
13.         }
14.         ListItem() {
15.           Row() {
16.             Text('测试数据 List')
17.           }
18.           .padding(10)
19.           .width('100%')
20.         }
21.         ListItem() {
22.           Row() {
23.             Text('测试数据 List')
24.           }
25.           .padding(10)
26.           .width('100%')
27.         }
28.         ListItem() {
29.           Row() {
30.             Text('测试数据 List')
31.           }
32.           .padding(10)
33.           .width('100%')
34.         }
35.         ListItem() {
36.           Row() {
37.             Text('测试数据 List')
38.           }
39.           .padding(10)
40.           .width('100%')
41.         }
42.       }
43.       .height(100)
44.       .divider({strokeWidth:1,color:"#ededed"})
45.     }
46.     .height('100%')
47.     .width('100%')
48.   }
49. }

复制代码

我们发现当页面元素超出了List组件设置的高度，屏幕上就会出现滚动条，并且下拉画面数据到顶部的时候，画面团体也会被下拉。并且上述代码有重复代码，这时我们就可以使用上一章节讲授的循环渲染ForEach组件去渲染列表让我们改造一下代码。

1. @Entry
2. @Component
3. struct ListDemoPage {
5.   // 定义一个类型为number，长度为 30 的数组，并且放入数据，数据为当前时间戳
6.   @State
7.   data:number[] = new Array(30).fill(Date.now())
9.   build() {
10.     Column() {
11.       // 使用 List 组件
12.       List() {
13.         // 循环渲染
14.         ForEach(this.data,(item:number)=>{
15.           // 必须使用 ListItem 组件进行包裹
16.           ListItem() {
17.             Row() {
18.               Text(item+"")
19.             }
20.             .padding(10)
21.             .width('100%')
22.           }
23.         })
25.       }
26.       .height('100%')
27.       .divider({strokeWidth:1,color:"#ededed"})
28.     }
29.     .height('100%')
30.     .width('100%')
31.   }
32. }

复制代码

下面我们实现下拉革新添加数据
Refresh 组件

Refresh可以举行页面下拉操纵并显示革新动效的容器组件。Refresh子组件会跟随手势下拉而下移。我们使用这个组件将我们上面的代码举行包裹。
语法

1. Refresh(){
2.   
3. }

复制代码

介绍一下 可以往Refresh组件传递的参数（先介绍两个）
●refreshing：当前组件是否正在革新。支持双向绑定
●builder：下拉时，自定义革新样式的组件。可以自定义下拉革新样式。
下拉革新

下面让我们使用Refresh组件实现下拉革新的功能。
示例

1. @Entry
2. @Component
3. struct ListDemoPage {
5.   // 定义数据
6.   @State
7.   data:number[] = new Array(30).fill(Date.now())
8.   // 定义刷新状态 flag
9.   @State
10.   private refreshingFlag: boolean = false;
11.   // 自定义下刷新页面
12.   @Builder
13.   private LoadingCustom() {
14.     Stack() {
15.       Row() {
16.         // Loading 组件
17.         LoadingProgress().width(30).color("#4095cb")
18.       }
19.     }.width('100%')
20.   }
22.   build() {
23.     Column() {
24.       // 使用刷新组件
25.       Refresh({ refreshing: $$this.refreshingFlag, builder: this.LoadingCustom() }) {
26.         List() {
27.           ForEach(this.data, (item: number) => {
28.             ListItem() {
29.               Row() {
30.                 Text(item + "")
31.               }
32.               .padding(10)
33.               .width('100%')
34.             }
35.           })
37.         }
38.         .height('100%')
39.         .divider({ strokeWidth: 1, color: "#ededed" })
40.       }
41.       // 进入刷新状态时触发回调。这里两后停止刷新状态
42.       .onRefreshing(() => {
43.         setTimeout(() => {
44.           this.refreshingFlag = false
45.         }, 2000)
46.       })
47.       // 设置触发刷新的下拉偏移量。
48.       .refreshOffset(64)
49.       // 设置当下拉距离超过refreshOffset时是否触发刷新。
50.       .pullToRefresh(true)
51.     }
52.     .height('100%')
53.     .width('100%')
54.   }
55. }

复制代码

上述代码中使用@builder 装饰器修饰的内容可以明白为一个子画面，实现了自定义革新页面，本章先不过多的说@builder 的作用。
现在只需在onRefreshing的方法中新增 List 的数据即可。

1. .onRefreshing(() => {
2.         setTimeout(() => {
3.           this.refreshingFlag = false
4.           // 添加数据
5.           this.data.push(...Array(30).fill(Date.now()))
6.         }, 2000)
7. })

复制代码

效果：

如上图所示，每次下拉革新后画面会新增 30 条数据。
上拉加载

Refresh组件中没有提供上拉加载的功能，我们可以联合 List 组件的变瞎搅实现此功能。
示例

我们发现当页面的滚动条触底时，会触发加载数据的变乱，此时我们必要在代码中知道当前滚动条的状态。

1. import { promptAction } from '@kit.ArkUI';
3. @Entry
4. @Component
5. struct ListDemoPage {
7.   @State
8.   data:number[] = new Array(30).fill(Date.now())
10.   @State
11.   private refreshingFlag: boolean = false;
12.   // 判断滚动条是否触底
13.   @State
14.   private isEnd: boolean = false;
15.   // 使用Scroller对象
16.   scroller: Scroller = new Scroller();
18.   @Builder
19.   private LoadingCustom() {
20.     Stack() {
21.       Row() {
22.         LoadingProgress().width(30).color("#4095cb")
23.       }
25.     }.width('100%')
26.   }
28.   build() {
29.     Column() {
30.       Refresh({ refreshing: $$this.refreshingFlag, builder: this.LoadingCustom() }) {
31.         List() {
32.           ForEach(this.data, (item: number) => {
33.             ListItem() {
34.               Row() {
35.                 Text(item + "")
36.               }
37.               .padding(10)
38.               .width('100%')
39.             }
40.           })
42.         }
43.         .height('100%')
44.         .divider({ strokeWidth: 1, color: "#ededed" })
45.         // 当画面能滚动说明没有触底
46.         .onScrollStart(() => {
47.           this.isEnd = false
48.         })
49.         // 判断当前是否停止滚动
50.         .onScrollStop(() => {
51.           // 如果停止滚动并且满足滚动条已经在底部进行数据的加载。
52.           if (this.isEnd) {
53.             // 加载数据
54.             promptAction.showToast({ message: '加载数据' })
55.             setTimeout(()=>{
56.               this.data.push(...Array(30).fill(Date.now()))
57.               // 加载完数据把滚动条移至底部
58.               this.scroller.scrollEdge(Edge.Bottom)
59.             },1000)
60.           }
61.         })
62.         // 当滚动条触底把 flag 设置成 true
63.         .onReachEnd(() => {
64.           this.isEnd = true
65.         })
66.       }
67.       .onRefreshing(() => {
68.         setTimeout(() => {
69.           this.refreshingFlag = false
70.           this.data.push(...Array(30).fill(Date.now()))
71.         }, 2000)
72.       })
73.       .refreshOffset(64)
74.       .pullToRefresh(true)
75.     }
76.     .height('100%')
77.     .width('100%')
78.   }
79. }

复制代码

写在末了

有很多小同伴不知道学习哪些鸿蒙开发技能？不知道必要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模子、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技能知识点。
希望这一份鸿蒙学习文档能够给大家带来资助，有必要的小同伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门讲授视频，内容包含：ArkTS、ArkUI、Web开发、应用模子、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门讲授视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发情况搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模子入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技能
●安全技能
●使命管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来计划
●鸿蒙体系移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档


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