HarmonyOS ArkUI之列表下拉刷新、加载更多（TS）_编程技术

HarmonyOS ArkUI之列表下拉刷新、加载更多（TS）

本项目界面搭建基于ArkUI中TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：

基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2

本文介绍列表刷新:

列表容器(List)、触摸事件(onTouch)、位置设置(offset)、显示动画(animateTo)

主要根据List中的回调方法onScrollIndex()监听当前列表首尾索引，根据触摸事件onTouch()处理下拉和上拉。

初始偏移量

下拉刷新： 1(负)自身高度。在屏幕顶部之外。

列表：0，默认在顶部。

(部分关键代码)

......
// 下拉刷新的布局高度
private pullRefreshHeight = 70
// 列表y坐标偏移量
@State offsetY: number = 0
build() {
Column() {
// 下拉刷新
Flex() {
......
}
.width('100%')
.height(this.pullRefreshHeight)
.offset({ x: 0, y: `${vp2px(-this.pullRefreshHeight) + this.offsetY}px` }) // 布局跟着列表偏移量移动
// 列表
List(){
......
}
.offset({ x: 0, y: `${this.offsetY}px` }) // touch事件计算的偏移量单位是px，记得加上单位
.onScrollIndex((start, end) => { // 监听当前列表首位索引
console.info(`${start}=start============end=${end}`)
this.startIndex = start
this.endIndex = end
})
}
.width('100%')
.height('100%')
.onTouch((event) => this.listTouchEvent(event)) // 父容器设置touch事件，当列表无数据也可以下拉刷新。
}
......

(部分关键代码)

以上关键代码就能实现下拉刷新

下拉不释放继续上拉可以取消下拉刷新，未达到条件：动画收回。

到达条件：如果一直下拉，下拉偏移量缓慢增加(阻力效果)，手指抬起偏移量回到下拉刷新布局高度，等待主动关闭刷新。

相对下拉刷新，上拉加载更多实现方式比较简单。

就是在List末尾加上ListItem()，当到了最后一位，偏移量达到加载更多的条件，动态显示布局。

(部分关键代码)

......
// 上拉加载的布局默认高度
private loadMoreDefaultHeight = 70
// 上拉加载的布局是否显示
@State isVisibleLoadMore: boolean = false
build() {
Column() {
// 下拉刷新
......
// 列表
List(){
ForEach(this.list, item => {
ListItem() {
Column() {
Text(`我是测试内容${item}`)
.padding(15)
.fontSize(18)
}
}
}, item => item.toString())
// =======================新增代码start==============================
// 加载更多布局
ListItem(){
Flex() {
......
}
.width('100%')
.height(this.loadMoreHeight)
.visibility(this.isVisibleLoadMore ? Visibility.Visible : Visibility.None) // 是否显示布局
}
// =======================新增代码end==============================
}
.offset({ x: 0, y: `${this.offsetY}px` }) // touch事件计算的偏移量单位是px，记得加上单位
.onScrollIndex((start, end) => { // 监听当前列表首位索引
console.info(`${start}=start============end=${end}`)
this.startIndex = start
this.endIndex = end
})
}
.width('100%')
.height('100%')
.onTouch((event) => this.listTouchEvent(event)) // 父容器设置touch事件，当列表无数据也可以下拉刷新。
}
......

手指移动上拉改变偏移量进行判断是否显示布局;

手指抬起偏移量置为0，请求数据成功后，关闭刷新状态。

(部分关键代码)

......
// 按下的y坐标
private downY = 0
listTouchEvent(event: TouchEvent){
switch (event.type) {
case TouchType.Down: // 手指按下
// 记录按下的y坐标
this.downY = event.touches[0].y
break
case TouchType.Move: // 手指移动
// 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
// 滑动的偏移量
this.offsetY = event.touches[0].y - this.downY
// 达到加载更多条件
if (Math.abs(this.offsetY) > vp2px(this.loadMoreHeight)/2) {
this.isCanLoadMore = true
// 显示布局
this.isVisibleLoadMore = true
// 偏移量缓慢增加
this.offsetY = - vp2px(this.loadMoreHeight) + this.offsetY * 0.1
}
}
}
break
case TouchType.Up: // 手指抬起
case TouchType.Cancel: // 触摸意外中断：来电界面
animateTo({
duration: 200, // 动画时长
}, () => {
// 偏移量设置为0
this.offsetY = 0
})
if (this.isCanLoadMore) {
console.info('======执行加载更多========')
// 加载中...
this.isLoading = true
// 模拟耗时操作
setTimeout(() => {
this.closeLoadMore()
this.loadMoreData()
}, 2000)
} else {
console.info('======关闭加载更多！未达到条件========')
this.closeLoadMore()
}
break
}
}
......