HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例

198 阅读2分钟

介绍

本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。

效果图预览

img

使用说明

  1. 进入页面,下拉列表触发刷新数据事件,等待数据刷新完成。
  2. 上滑列表到底部,触发加载更多数据事件,等待数据加载完成。

实现思路

  1. 使用第三方库pullToRefresh组件,将列表组件、绑定的数据对象和scroller对象包含进去,并添加上滑与下拉方法。源码参考PullToRefreshNews.ets
PullToRefresh({
  // 必传项,列表组件所绑定的数据
  data: $newsData,
  // 必传项,需绑定传入主体布局内的列表或宫格组件
  scroller: this.scroller,
  // 必传项,自定义主体布局,内部有列表或宫格组件
  customList: () => {
    // 一个用@Builder修饰过的UI方法
    this.getListView();
  },
  // 下拉刷新回调
  onRefresh: () => {
    return new Promise<string>((resolve, reject) => {
      ...
    });
  },
  // 上滑加载回调
  onLoadMore: () => {
    return new Promise<string>((resolve, reject) => {
      ...
    });
  },
  customLoad: null,
  customRefresh: null,
})
  1. 使用LazyForEach循环渲染列表。源码参考PullToRefreshNews.ets
LazyForEach(this.newsData, (item: NewsData) => {
  ListItem() {
    ...
  }
});

高性能知识点

不涉及

工程结构&模块类型

pulltorefreshnews                                  // har类型
|---pages
|---|---PullToRefreshNews.ets                      // 视图层-场景列表页面

模块依赖

@ohos/PullToRefresh

参考资料

@ohos/PullToRefresh @ohos/LazyForEach PullToRefresh第三方库

【有需要的朋友,可以关注VX公众号:Android 老皮!!!】

《鸿蒙(HarmonyOS)开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用(Stage模型)

3、构建第一个ArkTS应用(FA模型)

4、构建第一个JS应用(FA模型)

5、........

图片

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件(Stage模型)

3、应用配置文件概述(FA模型)

4、.......

图片

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、.......

图片

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、......

图片

第五章 UI开发

1.方舟开发框架(ArkUI)概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4.......

图片

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7.......

图片

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17......

图片

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4.......