【鸿蒙实战开发】数据的下拉刷新与上拉加载

本章介绍

本章主要介绍 ArkUI 开发中最常用的场景下拉刷新, 上拉加载，在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。下面就让我们开始今天的讲解吧！

List 组件

在 ArkUI 中List容器组件也可以实现数据滚动的效果， 这里为什么先介绍 List 组件，因为在本章节介绍的下拉刷新和上拉加载用到了从此组件，所以一起讲解一下。

语法

List(){
  ListItem(){
    
  }
}

注意: 在 List 组件中必须包含 ListItem 子组件才能正常渲染数据，可以理解为每一个 ListItem 对应的就是一条数据。

示例

@Entry
@Component
struct ListDemoPage {
  build() {
    Column() {
      List() {
        ListItem() {
          Row() {
            Text('测试数据 List')
          }
          .padding(10)
          .width('100%')
        }
        ListItem() {
          Row() {
            Text('测试数据 List')
          }
          .padding(10)
          .width('100%')
        }
        ListItem() {
          Row() {
            Text('测试数据 List')
          }
          .padding(10)
          .width('100%')
        }
        ListItem() {
          Row() {
            Text('测试数据 List')
          }
          .padding(10)
          .width('100%')
        }
        ListItem() {
          Row() {
            Text('测试数据 List')
          }
          .padding(10)
          .width('100%')
        }
      }
      .height(100)
      .divider({strokeWidth:1,color:"#ededed"})
    }
    .height('100%')
    .width('100%')
  }
}

我们发现当页面元素超出了List组件设置的高度，屏幕上就会出现滚动条，并且下拉画面数据到顶部的时候，画面整体也会被下拉。并且上述代码有重复代码，这时我们就可以使用上一章节讲解的循环渲染ForEach组件去渲染列表让我们改造一下代码。

@Entry
@Component
struct ListDemoPage {

  // 定义一个类型为number，长度为 30 的数组，并且放入数据，数据为当前时间戳
  @State
  data:number[]