【ArkTS】列表组件的“下拉刷新”和“上拉加载”

系列文章目录

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

文章目录

• 系列文章目录
• 前言
• 一、下拉刷新
• 二、上拉加载（触底加载更多）
• • 1.使用List组件结合onReachEnd方法实现触底加载更多
  • 2.防抖优化
• 三、封装一个等待加载小组件
• 总结

前言

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

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

代码结构解读：

├──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() {
        ...
    }
  }
}

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

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

代码如下（示例）：

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

2.防抖优化

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

async onl oadMore() {
    // 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
  }

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

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

效果展示:

总结

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