HarmonyOS ArkUI之列表下拉刷新、加载更多(TS) 原创 精华

中软HOS小鸿
发布于 2021-11-29 10:11
浏览
9收藏

作者:梁青松

简介

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

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

本文介绍列表刷新:

  • 下拉刷新
  • 上拉加载更多

ArKUI系列文章

【HarmonyOS ArkUI之仿微信朋友圈图片预览】

【HarmonyOS ArkUI之仿微信图片选择】

【HarmonyOS ArkUI之自定义组件侧滑菜单(JS)】

【HarmonyOS ArkUI之聊天列表滑动删除(TS)】

【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 = 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事件,当列表无数据也可以下拉刷新。
}
......

2、touch触摸事件:

  • 手指移动下拉改变偏移量;
  • 手指抬起根据是否可以刷新:显示刷新状态;
  • 请求数据成功后,关闭刷新状态。

(部分关键代码)

......
// 按下的y坐标
private downY = 0

listTouchEvent(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
  }
}
......

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

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

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)-鸿蒙开发者社区

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

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)-鸿蒙开发者社区

上拉加载更多

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

1、布局结构: 就是在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事件,当列表无数据也可以下拉刷新。
}
......

2、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
  }
}
......

结尾

每天进步一点点、需要付出努力亿点点。

完整代码加了优化,代码量比较多,就不单独贴出来了

https://gitee.com/liangdidi/ListPullRefreshLoadMoreDemo(需要登录才能看到演示图)

更多原创内容请关注:开鸿 HarmonyOS 学院

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-29 10:11:52修改
11
收藏 9
回复
举报
2条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

持续追更

回复
2021-12-1 13:39:56
vsrrrrrb
vsrrrrrb

犀利的~~

回复
2021-12-2 00:29:05
回复
    相关推荐