系列文章目录

【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 = true

    this.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
  }

---

总结

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