ArkUI组件——循环控制/List

循环控制

TypeScript 复制代码
class Item{
    name: string
    price:number

}
  private items:Array<Item> = [
    new Item("A0",2399),
    new Item("BE",1999),
    new Item("Ro",2799)
    ]
ForEach(
        this.items,
        (item:Item) => {})

List组件

列表List是一种复杂的容器,具备下列特点:

特点

1.列表项ListItem数量过多超出屏幕后,会自动提供滚动功能

2.列表项ListItem既可以纵向排列,也可以横向排列

格式

TypeScript 复制代码
List({space:number}){
    ForEach(items,item =>{
        ListItem(){
    //列表内容,只能包含一个组件
    }
})
}
.width()
.listDirection(Axis.xxx)

参数解析

space

在列表中space参数调整的是列表项之间的距离

特殊属性设置函数解析

.listDirection()

该函数用于设定列表方向,其中需要的参数为Axis枚举,通Row和Column一样,Vertical代表纵向排列,Horizontal代表横向排列

相关推荐
朝阳5819 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo10 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~29 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼33 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发