OpenHarmony实战开发-如何实现列表上拉加载更多内容场景。

最新推荐文章于 2024-06-13 16:45:49 发布
最新推荐文章于 2024-06-13 16:45:49 发布
阅读量667 收藏 18
点赞数 30
分类专栏： 鸿蒙 HarmonyOS 鸿蒙工程师 文章标签： HarmonyOS harmonyos 鸿蒙应用开发 华为 鸿蒙系统 鸿蒙 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/139151175
版权
鸿蒙 同时被 3 个专栏收录
567 篇文章 1 订阅
订阅专栏
鸿蒙工程师
567 篇文章 4 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

场景说明

列表上拉加载更多内容是一种常见的数据更新场景，常见于各类阅读类应用中，例如新闻阅读应用中，当用户浏览新闻列表到底部时，上拉将加载更多的新闻内容。本例将介绍列表上拉加载更多内容这个场景的具体实现方式。

效果呈现

本示例最终效果如下：
在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE：DevEco Studio 3.1 Release
  • SDK：Ohos_sdk_public 3.2.12.2 (APIVersion 9 Release)

实现思路

  1. 在页面布局上，通过在List列表末尾手工增加一个ListItem用于显示加载更多布局，通过visibility属性控制该ListItem的显示和隐藏，当上拉时显示，并根据加载中以及加载结果显示不同内容，加载完成后则隐藏。
  2. 监听List列表的onTouch事件，并判断是否为上划、滑动距离是否达到设定的阈值等条件，在条件满足后，触发数据加载逻辑，重新渲染列表。

开发步骤

1.利用ForEach循环渲染初始列表，在列表末尾增加一个ListItem用于显示加载更多布局，通过visibility属性控制显示和隐藏，并在List列表上拉过程中监听并处理onTouch事件。

末尾的ListItem可呈现的内容有：

  • 正在加载中显示“正在加载”。
  • 加载失败则显示"加载失败，点击重试"，引导用户进行点击，从而重新加载。
List({ space: 20, initialIndex: 0 }) {
    ForEach(this.list, (item) => {
      ListItem() {
        ...
      }
    }, item => item.toString())

    ListItem() { // 加载更多布局
      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        if (this.isShowRetry) {
          Text('加载失败，点击重试')
            ...
        } else {
          ...
          LoadingProgress()
          Text('正在加载...')
        }
      }

    }.visibility(this.isLoadMore ? Visibility.Visible : Visibility.None)
}
.onTouch(event => this.handleTouchEvent(event))

2.实现列表上拉加载更多内容的核心，是设计处理onTouch事件的响应函数handleTouchEvent，在该函数中需要根据手指滑动的类型TouchType进行不同的处理：

a. 手指按下时（TouchType.Down），记录按下的坐标，用于后续滑动方向及滑动距离计算：

case TouchType.Down: // 手指按下
    this.downY = event.touches[0].y; // 记录按下的y坐标
    this.lastMoveY = event.touches[0].y;
    break;

b. 手指滑动时（TouchType.Move），首先判断是否为上拉动作，如果为上拉动作，再判断是否达到上拉加载更多内容的条件。条件包括：

  • 是否有更多数据正在处于加载中状态，避免同时加载更多数据，只有当前未处于数据加载状态时才可以加载更多数据，否则直接忽略本次上拉动作。
  • 是否当前列表已滑动到最后一项，只有在最后一项时才可以加载更多数据。
  • 上拉滑动的偏移量是否达到设定的阈值，只有达到阈值才可以加载更多数据。
case TouchType.Move: // 手指滑动
    if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
      return;
    }
    if (event.touches[0].y - this.lastMoveY < 0) { // 手指上滑
      // 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
      if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
        this.offsetY = event.touches[0].y - this.downY; // 滑动的偏移量
        if (Math.abs(this.offsetY) > this.loadMoreHeight) { // 数据加载的阈值
          this.isLoadMore = true // 可以刷新了
          this.offsetY = this.loadMoreHeight + this.offsetY * 0.1 // 偏移量缓慢增加
        }
      }
    }
    this.lastMoveY = event.touches[0].y;
    break;

c. 手指抬起或滑动取消时（TouchType.UP或TouchType.Cancel），如果正处于数据加载中状态，则忽略，否则加载更多数据。

case TouchType.Up:// 手指抬起

case TouchType.Cancel:// 事件取消
	if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
	  return;
	}
	this.touchUpLoadMore()
	break

3.实现加载更多数据的逻辑，即在上述步骤的touchUpLoadMore方法中实现以下处理逻辑：

a. 通过动画处理列表回弹效果。

animateTo({
  duration: 300, // 动画时长
}, () => {
  this.offsetY = 0 // 偏移量设置为0
})

b. 模拟请求加载更多数据的结果，包括：

  • 正在加载：显示加载中效果。
  • 加载成功：重新渲染List，更新加载状态。
  • 加载失败：展示重新加载的引导说明，点击后重新触发touchUpLoadMore方法。
if (this.isLoadMore) {
  this.isLoading = true // 加载中...
  setTimeout(() => { // 模拟耗时操作
	this.getData()
	  .then(data => {
		if (data === StatusType.SUCCESS) { // 加载成功
		  this.isShowRetry = false
		  this.loadMoreData() // 加载数据
		  this.isLoadMore = false // 关闭加载更多
		  this.isLoading = false
		}
	  })
	  .catch(error => { // 加载失败
		this.isShowRetry = true // 展示“点击重试”
		console.info('error message ' + error)
	  })
  }, 2000)
} else { // 关闭加载更多
  this.isLoadMore = false
  this.isLoading = false
}

完整代码

通过上述步骤可以完成整个示例的开发，完整代码如下：

@Entry
@Component
struct ListPullupLoading {
  @State list: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State offsetY: number = 0 // 列表y坐标偏移量
  private downY: number = 0 // 按下的y坐标
  private lastMoveY: number = 0 // 上一次移动的坐标
  private endIndex: number = 0 // 当前列表尾部索引
  private loadMoreHeight = 100 // 触发上拉加载的阈值高度

  @State isLoadMore: boolean = false // 是否可以加载更多，上拉加载的布局是否显示
  private  isLoading: boolean = false // 是否加载中，加载中不进入触摸逻辑
  @State isShowRetry: boolean = false // 点击重试 是否显示

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.list, (item) => {
          ListItem() {
            Text('' + item).width('100%').height('100%')
              .fontSize(24)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xDCDCDC)
          }.width('100%').height(100)
        }, item => item.toString())

        ListItem() { // 加载更多布局
          Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
            if (this.isShowRetry) {
              Text('加载失败，点击重试')
                .margin({ left: 7, bottom: 1 })
                .fontColor(Color.Grey)
                .fontSize(24)
                .onClick(() => {
                  this.isShowRetry = false
                  this.touchUpLoadMore()
                })
            } else {
              LoadingProgress()
                .width(36).height(36)

              Text('正在加载...')
                .margin({ left: 7, bottom: 1 })
                .fontColor(Color.Grey)
                .fontSize(24)
            }
          }.width('100%').height('100%')
          .backgroundColor(0xFFFFFF)

        }
        .height(this.loadMoreHeight)
        .visibility(this.isLoadMore ? Visibility.Visible : Visibility.None)

      }
      .width('100%')
      .height('100%')
      .listDirection(Axis.Vertical) // 排列方向
      .onScrollIndex((start: number, end: number) => {
        console.info('start = ' + start.toString() + ' end = ' + end.toString())
        this.endIndex = end
      })
      .onTouch(event => this.handleTouchEvent(event))
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xFFFFFF)
  }

  /**
   * 处理onTouch事件
   */
  handleTouchEvent(event: TouchEvent) {
    switch (event.type) {
      case TouchType.Down: // 手指按下
        this.downY = event.touches[0].y; // 记录按下的y坐标
        this.lastMoveY = event.touches[0].y;
        break;

      case TouchType.Move: // 手指滑动
        if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
          return;
        }
        if (event.touches[0].y - this.lastMoveY < 0) { // 手指上滑
          // 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
          if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
            this.offsetY = event.touches[0].y - this.downY; // 滑动的偏移量
            if (Math.abs(this.offsetY) > this.loadMoreHeight) { // 数据加载的阈值
              this.isLoadMore = true // 可以刷新了
              this.offsetY = this.loadMoreHeight + this.offsetY * 0.1 // 偏移量缓慢增加
            }
          }
        }
        this.lastMoveY = event.touches[0].y;
        break;

      case TouchType.Up:// 手指抬起

      case TouchType.Cancel:// 事件取消
        if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
          return;
        }
        this.touchUpLoadMore()
        break
    }
  }

  /**
   * 手指抬起，处理加载更多
   */
  private touchUpLoadMore() {
    animateTo({
      duration: 300, // 动画时长
    }, () => {
      this.offsetY = 0 // 偏移量设置为0
    })

    if (this.isLoadMore) {
      this.isLoading = true // 加载中...
      setTimeout(() => { // 模拟耗时操作
        this.getData()
          .then(data => {
            if (data === StatusType.SUCCESS) { // 加载成功
              this.isShowRetry = false
              this.loadMoreData() // 加载数据
              this.isLoadMore = false // 关闭加载更多
              this.isLoading = false
            }
          })
          .catch(error => { // 加载失败
            this.isShowRetry = true // 展示“点击重试”
            console.info('error message ' + error)
          })
      }, 2000)
    } else { // 关闭加载更多
      this.isLoadMore = false
      this.isLoading = false
    }
  }

  /**
   * mock 产生更多数据
   */
  private loadMoreData() {
    let initValue = this.list[this.list.length - 1] + 1;
    for (let i = initValue; i < initValue + 10; i++) {
      this.list.push(i)
    }
  }

  /**
   * 模拟数据加载结果
   */
  private getData(): Promise<StatusType> {
    return new Promise((resolve, reject) => {
      const randomNumber: number = Math.random();
      if (randomNumber >= 0.5) {
        resolve(StatusType.SUCCESS)
      } else {
        reject(StatusType.FAIL)
      }
    })
  }
}

enum StatusType {
  SUCCESS,
  FAIL
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：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.……
在这里插入图片描述

码牛程序猿
关注
  • 30
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
openharmony-docker-master.zip
03-23
OpenHarmony_Docker 则是针对 OpenHarmony 项目在编译时面临的环境不统一的情况而使用 Docker 来对其进行容器化编译的一个项目
OpenHarmony实战开发-创建列表 (List)
2401_82546228的博客
04-26 685
列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。
OpenHarmony实战开发-应用列表场景性能提升实践。
m0_70749039的博客
04-22 754
在应用的UI开发中，使用列表是一种常规场景，因此，对列表性能进行优化是非常重要的。本文将针对应用开发列表场景的性能提升实践方法展开介绍。
OpenHarmony实战开发-如何实现聊天实例应用。
2401_82546228的博客
04-02 636
这是一个仿聊天类应用，使用了静态布局搭建了不同的页面。为了优化内存与性能体验，在部分list场景使用了懒加载。
OpenHarmony实战开发-如何实现管理应用窗口（Stage模型）
2401_82546228的博客
05-06 1016
窗口沉浸式能力：指对状态栏、导航栏等系统窗口进行控制，减少状态栏导航栏等系统界面的突兀感，从而使用户获得最佳体验的能力。沉浸式能力只在应用主窗口作为全屏窗口时生效。通常情况下，应用子窗口（弹窗、悬浮窗口等辅助窗口）和处于自由窗口下的应用主窗口无法使用沉浸式能力。
OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
11-08
Command Line Tools for OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
是在 OpenHarmony 的 kernel-liteos-a 基础上给内核源码加上中文注解的版本
05-06
kernel_liteos_a_note 是在 OpenHarmony 的 kernel_liteos_a 基础上给内核源码加上中文注解的版本，同步官方代码迭代推进
OpenHarmony（ohcommandline-tools-mac-2.0.0.2.zip）
11-08
Command Line Tools for OpenHarmony（ohcommandline-tools-mac-2.0.0.2.zip）
HarmonyOS(33) @LocalStorageProp使用指南
菜鸟博客
06-12 350
HarmonyOS @LocalStorageProp使用指南
【HarmonyOS】鸿蒙应用模块化实现
我的小窝
06-10 905
鸿蒙应用模块化实现
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现（五）
pixle的博客
06-11 617
HarmonyOS Next（基于API11）实现从手机选择图片或拍照上传功能，常用于头像上传等操作
鸿蒙轻内核A核源码分析系列七 进程管理 (1)
最新发布
maniuT的博客
06-13 445
本文先熟悉下进程管理的概念、运行机制和编程接口。
鸿蒙元服务未来是能一“通”多端的前端形态？
speedoooo的博客
06-11 982
鸿蒙元服务的核心是“元服务”，它是一种全新的服务形态，能够将服务的能力和数据进行抽象化和解耦，并提供统一的访问接口，从而使服务能够跨终端、跨平台、跨场景地进行调用和使用。今年HarmonyOS的推广非常的迅速，以最快的、性价比最高的技术应对鸿蒙独立操作系统的市场推出，是今年开发者研究的重点课题。
鸿蒙轻内核A核源码分析系列六 MMU协处理器（2）
maniuT的博客
06-13 681
在arch\arm\arm\include\arm.h文件中，封装了CP15协处理器相关的寄存器操作汇编函数。我们主要看下MMU相关的部分。
鸿蒙轻内核A核源码分析系列六 MMU协处理器（1）
maniuT的博客
06-13 1114
在前面系列分析虚实映射时，涉及到了一些MMU协处理器与相关的汇编代码没有深入讲解。本文来专门分析那些协处理器与汇编代码。
【HarmonyOS】遇见的问题汇总
m0_65041204的博客
06-12 985
自学过程中遇到的部分问题记录
鸿蒙轻内核A核源码分析系列五 虚实映射（5）虚实映射解除
maniuT的博客
06-12 1136
虚实映射解除函数LOS_ArchMmuUnmap解除进程空间虚拟地址区间与物理地址区间的映射关系，其中参数包含MMU结构体、解除映射的虚拟地址和解除映射的数量count,数量的单位是内存页数。 ⑴处函数OsGetPte1用于获取指定虚拟地址对应的L1页表项数据。⑵处计算需要解除的无效映射的数量，后文再详细分析该函数。如果页表项映射类型为L1 Section，并且虚拟地址1MiB对齐，映射的数量超过256，则执行⑶解除映射Section，后文详细分析函数OsUnmapSection。如果页表项映射类型为Pag
OpenHarmony-3.2-Beta2官方文档地址
06-09
OpenHarmony-3.2-Beta2的官方文档地址是https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start.md，你可以在这里查找和获取OpenHarmony-3.2-Beta2的相关文档和资料。希望这个信息对你有所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值