【ArkTS】列表组件的“下拉刷新”和“上拉加载”
系列文章目录
【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 // 资源文件目录
一、下拉刷新
下拉刷新的实现主要分成三步：
- 监听手指按下事件，记录其初始位置的值。
- 监听手指按压移动事件，记录并计算当前移动的位置与初始值的差值，大于0表示向下移动，同时设置一个允许移动的最大值。
- 监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏
页面的下拉刷新操作推荐使用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
}
三、封装一个等待加载小组件
- 创建一个下拉刷新布局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)
})
}
}
...
}
效果展示:
总结
以上就是今天要讲的内容，本文仅仅简单介绍了列表组件的“下拉刷新”和“上拉加载”的方法。
原文地址：https://blog.csdn.net/i20021209/article/details/144305244
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！