HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)

时间:2022-02-26 14:37:18

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS) 

简介

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

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

本文介绍列表刷新:

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

效果演示

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)

主要知识点

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

2、touch触摸事件:

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

(部分关键代码)

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

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

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

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)

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

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)

上拉加载更多

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

1、布局结构:

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

(部分关键代码)

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

2、touch触摸事件:

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

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

(部分关键代码)

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

结尾

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

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

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


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