鸿蒙5.0开发【数据列表加载更多】(无需监听列表滑到最底部)

最新推荐文章于 2024-08-15 10:19:02 发布

鸿蒙系统小能手Mr.Li

最新推荐文章于 2024-08-15 10:19:02 发布

阅读量300

点赞数 5

分类专栏：鸿蒙开发文章标签： windows microsoft harmonyos OpenHarmony 鸿蒙数据列表鸿蒙系统

本文链接：https://blog.csdn.net/2401_82772199/article/details/140849893

版权

鸿蒙开发专栏收录该内容

273 篇文章 1 订阅

订阅专栏

前言

有数据列表的页面，一般需要使用[下拉刷新]和上拉加载的功能
而数据列表实现加载下一页的功能，目前有以下几种方案

加载更多方案

监听列表的滑动事件，在列表滑动到底部时触发加载更多的逻辑
自定义布局，监听手势，上拉布局到某个高度时->释放手势->触发加载更多的逻辑
手动给数据列表加个ListItem，然后监听onVisibleAreaChange事件 (本文主要介绍的方案)
LazyForEach中通过index判断是否是最后一个item,然后触发加载更多逻辑

//在IDataSource中的totalCount方法中返回真实item数量+1
totalCount(): number {
  return this.dataList.length + 1;
}

LazyForEach(IDataSource, (item: Object, index) => {
  if(通过index判断是否是最后一个item){
    ListItem() {
      /*footer布局*/
    }
  }else{
    ListItem() {
      /*正常item布局*/
    }
  }
})

各个方案缺点

第1种方案
列表必须滑动到最底部才能触发事件，哪怕列表滑到99%也不能触发。
如果列表有回弹效果，回弹时又会触发一次(小问题,可以通过逻辑判断规避或者禁用回弹效果)

第2种方案
每次都需要一个上拉的操作，用户体验感略差(如果产品明确需要这种交互效果除外)

第4种方案
该方案也是我一开始实现的方案，体验感也是最好的一种
(真正的无感加载，正常滑动列表时，还没看到footer布局时，下一页可能就加载完成了)
但是因为实现逻辑不够优雅，被我放弃了，然后改用第3种方案实现(对已有布局没有入侵性)

效果图

垂直列表

横向列表

第3种方案

实现过程

在list列表尾部添加一个item布局，然后监听item布局的onVisibleAreaChange事件
onVisibleAreaChange()第一个参数传[0],这样滑动列表时item布局在屏幕显示一丢丢时，就会触发该事件的回调,然后在该事件中执行加载更多的逻辑,
这样就规避第1种方案中必须滑动到最底部的问题

如果用户滑动速度不是很快，可以做到无感加载下一页
如果产品需要footer视图出现一半及以上的面积，让用户感知明显，再触发加载更多
只需要将第一个参数改成[0.5]即可

List() {
  LazyForEach(this.adapter, (item: Object, index) => {
    ListItem() {
       Text("正常item布局")
    }
  })
  
  /*手动添加一个footer布局*/
  ListItem() {
    LoadMoreView({
      /*控制器，用于通知LoadMoreView内部是否加载完成或加载错误或是否还有更多数据*/
      controller: this.loadMoreController,
      
      loadMore: () => {
        /*触发加载更多*/
      },
      
      /*非必传：是否是垂直列表*/
      vertical: this.isVertical,
      
      /*非必传：加载数据中的自定义视图*/
      loadingView:()=>{},
      
      /*非必传：加载错误的自定义视图*/
      errorView:()=>{},
      
      /*非必传：暂无更多数据的自定义视图*/
      noMoreView:()=>{}
    })
  }
}

@Component
export struct LoadMoreView {
    build() {
      Text("正在加载更多...")
      .width("100%")
      .height("50")
      .onVisibleAreaChange([0], (isVisible: boolean, currentRatio: number) => {
        if (isVisible) {
          /*触发加载更多逻辑*/
        }
      })
    }
}

export class LoadMoreController {
  loadEnd: (hasMore: boolean) => void = (hasMore: boolean) => {
    //请求数据完成，hasMore true:还有更多数据，false:暂无更多数据
  }
  loadError: () => void = () => {
    //请求数据失败
  }
}

在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
更多鸿蒙最新技术知识点，请前往关注作者博客：https://gitee.com/li-shizhen-skin/zhihu/blob/master/README.md