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

本章介绍

本章主要介绍 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[]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值