系列文章目录

【ArkTS】关于ForEach的第三个参数键值
【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】
【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案”
【ArkTS】 一篇带你掌握“语音转文字技术” --内附详细代码
【ArkTS】技能提高–“用户授权”跳转设置页的两种方式详解
【ArkTS】使用AVRecorder录制音频 --内附录音机开发详细代码

---

---

前言

当我们需要渲染大量的数据时，全部加载不仅会降低我们的性能，还会占用大量内存，可能会造成应用使用的卡顿、闪退。

页面的下拉刷新与上拉加载功能在移动应用中十分常见，例如，新闻页面的内容刷新和加载。这两种操作的原理都是通过响应用户的触摸事件，在顶部或者底部显示一个刷新或加载视图，完成后再将此视图隐藏。

代码结构解读：

├──entry/src/main/ets                   // ArkTS代码区
│  ├──common
│  │  ├──constant
│  │  │  └──CommonConstant.ets          // 公共常量类
│  │  └──utils
│  │     ├──HttpUtil.ets                // 网络请求方法
│  │     ├──Logger.ets                  // 日志打印工具
│  │     ├──PullDownRefresh.ets         // 下拉刷新方法
│  │     └──PullUpLoadMore.ets          // 上拉加载更多方法
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口类
│  ├──pages
│  │  └──Index.ets                      // 入口文件
│  ├──view
│  │  ├──CustomRefreshLoadLayout.ets    // 下拉刷新、上拉加载布局文件
│  │  ├──LoadMoreLayout.ets             // 上拉加载布局封装
│  │  ├──NewsItem.ets                   // 新闻数据
│  │  ├──NewsList.ets                   // 新闻列表
│  │  ├──NoMoreLayout.ets               // 没有更多数据封装
│  │  ├──RefreshLayout.ets              // 下拉刷新布局封装
│  │  └──TabBar.ets                     // 新闻类型页签
│  └──viewmodel
│     ├──NewsData.ets                   // 新闻数据实体类
│     ├──NewsModel.ets                  // 新闻数据模块信息
│     ├──NewsTypeModel.ets              // 新闻类型实体类
│     ├──NewsViewModel.ets              // 新闻数据获取模块
│     └──ResponseResult.ets             // 请求结果实体类
└──entry/src/main/resources             // 资源文件目录

---

一、下拉刷新

下拉刷新的实现主要分成三步：

1. 监听手指按下事件，记录其初始位置的值。
2. 监听手指按压移动事件，记录并计算当前移动的位置与初始值的差值，大于0表示向下移动，同时设置一个允许移动的最大值。
3. 监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏

页面的下拉刷新操作推荐使用Refresh组件实现。

//refreshing组件当前是否处于刷新中状态。true表示处于刷新中状态，false表示未处于刷新中状态。
Refresh({ refreshing: $$this.isRefreshing }){List() {ListItem() {...}}
}

属性	作用
refreshOffset	设置触发刷新的下拉偏移量，当下拉距离小于该属性设置值时离手不会触发刷新。
pullToRefresh	设置当下拉距离超过refreshOffset时是否能触发刷新。
pullDownRatio	设置下拉跟手系数。

二、上拉加载（触底加载更多）

1.使用List组件结合onReachEnd方法实现触底加载更多

代码如下（示例）：

List() {ForEach(this.questionList, (item: QuestionItem) => {ListItem() {...}})
}
.onReachEnd(() => {
// 2. 监听触底事件
this.onLoadMore()
})

2.防抖优化

定义变量判断是否正在发送加载请求，写在监视触底事件里。

async onLoadMore() {// 4. 判断如果正在请求, 不许再次发请求if (this.isRequesting === true) {return}// 2. 每次请求前, 标记正在请求this.isRequesting = truethis.page++console.log('请求的页数 -----> ', this.page)const res = await request<iListData>({url: '...',params: {questionBankType: ...,type: ...,page: ...}});this.questionList.push(...res.data.data.rows);// 3. 每次请求后, 标记请求结束this.isRequesting = false}

三、封装一个等待加载小组件

1. 创建一个下拉刷新布局CustomLayout，动态传入刷新图片和刷新文字描述。

// CustomRefreshLoadLayout.ets
import { CustomRefreshLoadLayoutClass } from '../viewmodel/NewsData';
import { CommonConstant as Const } from '../common/constant/CommonConstant';@Component
export default struct CustomLayout {@ObjectLink customRefreshLoadClass: CustomRefreshLoadLayoutClass;build() {Row() {// 下拉刷新图片Image(this.customRefreshLoadClass.imageSrc)...// 下拉刷新文字Text(this.customRefreshLoadClass.textValue)...}...}
}

将下拉刷新的布局添加到NewsList.ets文件中新闻列表布局ListLayout里面，监听ListLayout组件的onTouch事件实现下拉刷新。

// NewsList.ets
build() {Column() {...}....onTouch((event: TouchEvent | undefined) => {if (event) {if (this.newsModel.pageState === PageState.Success) {listTouchEvent(this.newsModel, event);}}})
}
@Builder ListLayout() {List() {// 下拉刷新布局ListItem() {RefreshLayout({refreshLayoutClass: new CustomRefreshLoadLayoutClass(this.newsModel.isVisiblePullDown, this.newsModel.pullDownRefreshImage,this.newsModel.pullDownRefreshText, this.newsModel.pullDownRefreshHeight)})}}...
}

效果展示:

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了列表组件的“下拉刷新”和“上拉加载”的方法。