努力尽今夕,少年犹可夸。这篇文章主要讲述HarmonyOS ArkUI之列表下拉刷新加载更多(TS)相关的知识,希望能为你提供帮助。
作者:梁青松
简介本项目界面搭建基于ArkUI
中TS
扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:
基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2
本文介绍列表刷新:
- 下拉刷新
- 上拉加载更多
【HarmonyOS ArkUI之仿微信朋友圈图片预览】
【HarmonyOS ArkUI之仿微信图片选择】
【HarmonyOS ArkUI之列表下拉刷新加载更多(TS)】【HarmonyOS ArkUI之自定义组件侧滑菜单(JS)】
【HarmonyOS ArkUI之聊天列表滑动删除(TS)】
【HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)】
效果演示
文章图片
主要知识点列表容器(List)、触摸事件(onTouch)、位置设置(offset)、显示动画(animateTo)
实现思路主要根据
List
中的回调方法onScrollIndex()
监听当前列表首尾索引,根据触摸事件onTouch()
处理下拉和上拉。下拉刷新效果
1、容器布局Column垂直结构: 下拉刷新、列表。父容器设置
touch
事件,如果当列表无数据或者数据少,可以全局响应。初始偏移量
- 下拉刷新: 1(负)自身高度。在屏幕顶部之外。
- 列表:0,默认在顶部。
......
// 下拉刷新的布局高度
private pullRefreshHeight = 70
// 列表y坐标偏移量
@State offsetY: number = 0build() {
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事件,当列表无数据也可以下拉刷新。
}
......
2、touch触摸事件:
- 手指移动下拉改变偏移量;
- 手指抬起根据是否可以刷新:显示刷新状态;
- 请求数据成功后,关闭刷新状态。
......
// 按下的y坐标
private downY = 0listTouchEvent(event: TouchEvent){
switch (event.type) {
case TouchType.Down: // 手指按下
// 记录按下的y坐标
this.downY = event.touches[0].y
break
case TouchType.Move: // 手指移动
// 当首部索引位于0
if (this.startIndex == 0) {
// 下拉刷新布局高度
var height = vp2px(this.pullRefreshHeight)
// 滑动的偏移量
this.offsetY = event.touches[0].y - this.downY// 偏移量大于下拉刷新布局高度,达到刷新条件
if (this.offsetY >
= height) {
// 可以刷新了
this.isCanRefresh = true
// 状态1:松开刷新
this.pullRefreshState(1)
// 偏移量的值缓慢增加
this.offsetY = height + this.offsetY * 0.15
} else {
// 状态0:下拉刷新
this.pullRefreshState(0)
}
}
break
case TouchType.Up: // 手指抬起
case TouchType.Cancel: // 触摸意外中断:来电界面
// 是否可以刷新
if (this.isCanRefresh) {
console.info(======执行下拉刷新========)
// 偏移量为下拉刷新布局高度
this.offsetY = vp2px(this.pullRefreshHeight)
// 状态2:正在刷新
this.pullRefreshState(2)// 模拟耗时操作
setTimeout(() =>
{
// 刷新数据
this.refreshData()
// 关闭刷新
this.closeRefresh()
}, 2000)} else {
console.info(======关闭下拉刷新!未达到条件========)
// 关闭刷新
this.closeRefresh()
}
break
}
}
......
以上关键代码就能实现下拉刷新
下拉不释放继续上拉可以取消下拉刷新,未达到条件:动画收回。
文章图片
到达条件:如果一直下拉,下拉偏移量缓慢增加(阻力效果),手指抬起偏移量回到下拉刷新布局高度,等待主动关闭刷新。
文章图片
上拉加载更多
相对下拉刷新,上拉加载更多实现方式比较简单。
1、布局结构: 就是在List末尾加上
ListItem()
,当到了最后一位,偏移量达到加载更多的条件,动态显示布局(部分关键代码)
......
// 上拉加载的布局默认高度
private loadMoreDefaultHeight = 70
// 上拉加载的布局是否显示
@State isVisibleLoadMore: boolean = falsebuild() {
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事件,当列表无数据也可以下拉刷新。
}
......
2、touch触摸事件:
- 手指移动上拉改变偏移量进行判断是否显示布局;
- 手指抬起偏移量置为0,请求数据成功后,关闭刷新状态。
......
// 按下的y坐标
private downY = 0listTouchEvent(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
}
}
......
结尾每天进步一点点、需要付出努力亿点点。
完整代码加了优化,代码量比较多,就不单独贴出来了
https://gitee.com/liangdidi/ListPullRefreshLoadMoreDemo(需要登录才能看到演示图)
更多原创内容请关注:开鸿 HarmonyOS 学院入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
想了解更多关于鸿蒙的内容,请访问:
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center
文章图片
:::
推荐阅读
- 远程访问以及控制(2/2)+实验(TCPWrappers的控制策略)
- Spring Boot+Vue实现汽车租赁系统(毕设)
- 服务器数据恢复案例服务器崩溃重启无法进入系统故障的数据恢复
- Android技术分享| ViewPager2离屏加载,实现抖音上下视频滑动
- GO并发详解
- C# 读取txt文件生成Word文档
- Linux中的进程管理
- 小型企业网项目建设实践(详细过程)
- mysql 初始化无法设置password