List

中List容器组件也可以实现数据滚动的效果在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。

下面就让我们开始今天的讲解吧

List

组件因为在本章节介绍的下拉刷新和上拉加载用到了从此组件所以一起讲解一下。

List(){ListItem(){}

List)}.padding(10).width(100%)}ListItem()

{Row()

List)}.padding(10).width(100%)}ListItem()

{Row()

List)}.padding(10).width(100%)}ListItem()

{Row()

List)}.padding(10).width(100%)}ListItem()

{Row()

List)}.padding(10).width(100%)}}.height(100).divider({strokeWidth:1,color:#ededed})}.height(100%).width(100%)}

}我们发现当页面元素超出了List组件设置的高度屏幕上就会出现滚动条并且下拉画面数据到顶部的时候画面整体也会被下拉。

并且上述代码有重复代码这时我们就可以使用上一章节讲解的循环渲染ForEach组件去渲染列表让我们改造一下代码。

Entry

的数组并且放入数据数据为当前时间戳Statedata:number[]

new

Array(30).fill(Date.now())build()

{Column()

循环渲染ForEach(this.data,(item:number){//

必须使用

{Text(item)}.padding(10).width(100%)}})}.height(100%).divider({strokeWidth:1,color:#ededed})}.height(100%).width(100%)}

}下面我们实现下拉刷新添加数据

Refresh可以进行页面下拉操作并显示刷新动效的容器组件。

Refresh子组件会跟随手势下拉而下移。

我们使用这个组件将我们上面的代码进行包裹。

Refresh(){}介绍一下

●builder下拉时自定义刷新样式的组件。

可以自定义下拉刷新样式。

下拉刷新

组件LoadingProgress().width(30).color(#4095cb)}}.width(100%)}build()

{Column()

)}.padding(10).width(100%)}})}.height(100%).divider({

strokeWidth:

进入刷新状态时触发回调。

这里两后停止刷新状态.onRefreshing(()

{setTimeout(()

设置触发刷新的下拉偏移量。

.refreshOffset(64)//

设置当下拉距离超过refreshOffset时是否触发刷新。

.pullToRefresh(true)}.height(100%).width(100%)}

}上述代码中使用builder

装饰器修饰的内容可以理解为一个子画面实现了自定义刷新页面本章先不过多的说builder

List

添加数据this.data.push(...Array(30).fill(Date.now()))},

2000)})效果

我们发现当页面的滚动条触底时会触发加载数据的事件此时我们需要在代码中知道当前滚动条的状态。

import

Array(30).fill(Date.now())Stateprivate

refreshingFlag:

{LoadingProgress().width(30).color(#4095cb)}}.width(100%)}build()

{Column()

)}.padding(10).width(100%)}})}.height(100%).divider({

strokeWidth:

})setTimeout((){this.data.push(...Array(30).fill(Date.now()))//

加载完数据把滚动条移至底部this.scroller.scrollEdge(Edge.Bottom)},1000)}})//

当滚动条触底把

falsethis.data.push(...Array(30).fill(Date.now()))},

2000)}).refreshOffset(64).pullToRefresh(true)}.height(100%).width(100%)}

}写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术不知道需要重点掌握哪些鸿蒙应用开发知识点而且学习时频繁踩坑最终浪费大量时间。

所以有一份实用的鸿蒙HarmonyOS

这份鸿蒙HarmonyOS

NEXT文档包含了鸿蒙开发必掌握的核心知识要点内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等鸿蒙HarmonyOS

希望这一份鸿蒙学习文档能够给大家带来帮助有需要的小伙伴自行领取限时开源先到先得~无套路领取

获取这份完整版高清学习路线请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙HarmonyOS

有了路线图怎么能没有学习文档呢小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙OpenHarmony

开发入门教学视频内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙

获取以上完整鸿蒙HarmonyOS学习文档请点击→纯血版全套鸿蒙HarmonyOS学习文档