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代表横向排列

相关推荐
RoyLin5 小时前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang5 小时前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构
小桥风满袖6 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang6 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793086 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼6 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu6 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin6 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者6 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang6 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构