HarmonyOS ArkUI之列表下拉刷新、加载更多（TS）

 

简介

本项目界面搭建基于ArkUI中TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：

基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2

本文介绍列表刷新:

• 下拉刷新
• 上拉加载更多

效果演示

主要知识点

列表容器(List)、触摸事件(onTouch)、位置设置(offset)、显示动画(animateTo)

实现思路

主要根据List中的回调方法onScrollIndex()监听当前列表首尾索引，根据触摸事件onTouch()处理下拉和上拉。

下拉刷新效果

1、容器布局Column垂直结构： 下拉刷新、列表。父容器设置touch事件，如果当列表无数据或者数据少，可以全局响应。

初始偏移量

下拉刷新： 1(负)自身高度。在屏幕顶部之外。

列表：0，默认在顶部。

(部分关键代码)

1. ......
2. // 下拉刷新的布局高度
3. private pullRefreshHeight = 70
4. // 列表y坐标偏移量
5. @State offsetY: number = 0
7. build() {
8. Column() {
9. // 下拉刷新
10. Flex() {
11. ......
12. }
13. .width('100%')
14. .height(this.pullRefreshHeight)
15. .offset({ x: 0, y: `${vp2px(-this.pullRefreshHeight) + this.offsetY}px` }) // 布局跟着列表偏移量移动
17. // 列表
18. List(){
19. ......
20. }
21. .offset({ x: 0, y: `${this.offsetY}px` }) // touch事件计算的偏移量单位是px，记得加上单位
22. .onScrollIndex((start, end) => { // 监听当前列表首位索引
23. console.info(`${start}=start============end=${end}`)
24. this.startIndex = start
25. this.endIndex = end
26. })
27. }
28. .width('100%')
29. .height('100%')
30. .onTouch((event) => this.listTouchEvent(event)) // 父容器设置touch事件，当列表无数据也可以下拉刷新。
31. }
32. ......

2、touch触摸事件：

• 手指移动下拉改变偏移量;
• 手指抬起根据是否可以刷新：显示刷新状态;
• 请求数据成功后，关闭刷新状态。

(部分关键代码)

1. ......
2. // 按下的y坐标
3. private downY = 0
5. listTouchEvent(event: TouchEvent){
6. switch (event.type) {
7. case TouchType.Down: // 手指按下
8. // 记录按下的y坐标
9. this.downY = event.touches[0].y
10. break
11. case TouchType.Move: // 手指移动
12. // 当首部索引位于0
13. if (this.startIndex == 0) {
14. // 下拉刷新布局高度
15. var height = vp2px(this.pullRefreshHeight)
16. // 滑动的偏移量
17. this.offsetY = event.touches[0].y - this.downY
19. // 偏移量大于下拉刷新布局高度，达到刷新条件
20. if (this.offsetY >= height) {
21. // 可以刷新了
22. this.isCanRefresh = true
23. // 状态1：松开刷新
24. this.pullRefreshState(1)
25. // 偏移量的值缓慢增加
26. this.offsetY = height + this.offsetY * 0.15
27. } else {
28. // 状态0：下拉刷新
29. this.pullRefreshState(0)
30. }
31. }
32. break
33. case TouchType.Up: // 手指抬起
34. case TouchType.Cancel: // 触摸意外中断：来电界面
35. // 是否可以刷新
36. if (this.isCanRefresh) {
37. console.info('======执行下拉刷新========')
38. // 偏移量为下拉刷新布局高度
39. this.offsetY = vp2px(this.pullRefreshHeight)
40. // 状态2：正在刷新
41. this.pullRefreshState(2)
43. // 模拟耗时操作
44. setTimeout(() => {
45. // 刷新数据
46. this.refreshData()
47. // 关闭刷新
48. this.closeRefresh()
49. }, 2000)
51. } else {
52. console.info('======关闭下拉刷新！未达到条件========')
53. // 关闭刷新
54. this.closeRefresh()
55. }
56. break
57. }
58. }
59. ......

以上关键代码就能实现下拉刷新

下拉不释放继续上拉可以取消下拉刷新，未达到条件：动画收回。

到达条件：如果一直下拉，下拉偏移量缓慢增加(阻力效果)，手指抬起偏移量回到下拉刷新布局高度，等待主动关闭刷新。

上拉加载更多

相对下拉刷新，上拉加载更多实现方式比较简单。

1、布局结构：

就是在List末尾加上ListItem()，当到了最后一位，偏移量达到加载更多的条件，动态显示布局。

(部分关键代码)

1. ......
2. // 上拉加载的布局默认高度
3. private loadMoreDefaultHeight = 70
4. // 上拉加载的布局是否显示
5. @State isVisibleLoadMore: boolean = false
7. build() {
8. Column() {
9. // 下拉刷新
10. ......
12. // 列表
13. List(){
14. ForEach(this.list, item => {
15. ListItem() {
16. Column() {
17. Text(`我是测试内容${item}`)
18. .padding(15)
19. .fontSize(18)
20. }
21. }
22. }, item => item.toString())
24. // =======================新增代码start==============================
25. // 加载更多布局
26. ListItem(){
27. Flex() {
28. ......
29. }
30. .width('100%')
31. .height(this.loadMoreHeight)
32. .visibility(this.isVisibleLoadMore ? Visibility.Visible : Visibility.None) // 是否显示布局
33. }
34. // =======================新增代码end==============================
35. }
36. .offset({ x: 0, y: `${this.offsetY}px` }) // touch事件计算的偏移量单位是px，记得加上单位
37. .onScrollIndex((start, end) => { // 监听当前列表首位索引
38. console.info(`${start}=start============end=${end}`)
39. this.startIndex = start
40. this.endIndex = end
41. })
42. }
43. .width('100%')
44. .height('100%')
45. .onTouch((event) => this.listTouchEvent(event)) // 父容器设置touch事件，当列表无数据也可以下拉刷新。
46. }
47. ......

2、touch触摸事件：

手指移动上拉改变偏移量进行判断是否显示布局;

手指抬起偏移量置为0，请求数据成功后，关闭刷新状态。

(部分关键代码)

1. ......
2. // 按下的y坐标
3. private downY = 0
5. listTouchEvent(event: TouchEvent){
6. switch (event.type) {
7. case TouchType.Down: // 手指按下
8. // 记录按下的y坐标
9. this.downY = event.touches[0].y
10. break
11. case TouchType.Move: // 手指移动
12. // 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
13. if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
14. // 滑动的偏移量
15. this.offsetY = event.touches[0].y - this.downY
16. // 达到加载更多条件
17. if (Math.abs(this.offsetY) > vp2px(this.loadMoreHeight)/2) {
18. this.isCanLoadMore = true
19. // 显示布局
20. this.isVisibleLoadMore = true
21. // 偏移量缓慢增加
22. this.offsetY = - vp2px(this.loadMoreHeight) + this.offsetY * 0.1
23. }
24. }
25. }
26. break
27. case TouchType.Up: // 手指抬起
28. case TouchType.Cancel: // 触摸意外中断：来电界面
29. animateTo({
30. duration: 200, // 动画时长
31. }, () => {
32. // 偏移量设置为0
33. this.offsetY = 0
34. })
35. if (this.isCanLoadMore) {
36. console.info('======执行加载更多========')
37. // 加载中...
38. this.isLoading = true
39. // 模拟耗时操作
40. setTimeout(() => {
41. this.closeLoadMore()
42. this.loadMoreData()
43. }, 2000)
44. } else {
45. console.info('======关闭加载更多！未达到条件========')
46. this.closeLoadMore()
47. }
48. break
49. }
50. }
51. ......

结尾

每天进步一点点、需要付出努力亿点点。

完整代码加了优化，代码量比较多，就不单独贴出来了

https://gitee.com/liangdidi/ListPullRefreshLoadMoreDemo(需要登录才能看到演示图)

原文链接：https://harmonyos.51cto.com