本章介绍
本章主要介绍 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[]