1# list 2 3<!--Kit: ArkUI--> 4<!--Subsystem: ArkUI--> 5<!--Owner: @yylong--> 6<!--Designer: @yylong--> 7<!--Tester: @liuzhenshuo--> 8<!--Adviser: @HelloCrease--> 9 10列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 11 12> **说明：** 13> 14> 该组件从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16 17## 子组件 18 19仅支持<[list-item](js-lite-components-container-list-item.md)>。 20 21 22## 属性 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| -------- | -------- | -------- | -------- | -------- | 26| id | string | - | 否 | 组件的唯一标识。 | 27| style | string | - | 否 | 组件的样式声明。 | 28| class | string | - | 否 | 组件的样式类，用于引用样式表。 | 29| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | 30 31 32## 事件 33 34| 名称 | 参数 | 描述 | 35| -------- | -------- | -------- | 36| scrollend | - | 列表滑动已经结束。 | 37| click | - | 点击动作触发该事件。 | 38| longpress | - | 长按动作触发该事件。 | 39| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | 组件上快速滑动后触发。 | 40| scrolltop<sup>8+</sup> | - | 当前列表已滑动到顶部位置。 | 41| scrollbottom<sup>8+</sup> | - | 当前列表已滑动到底部位置。 | 42 43 44## 样式 45 46| 名称 | 类型 | 默认值 | 必填 | 描述 | 47| -------- | -------- | -------- | -------- | -------- | 48| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>- column：主轴为纵向。<br/>- row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。轻量级智能穿戴设备不支持动态修改。 | 49| width | <length> \| <percentage><sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/>未设置时组件宽度默认为0。 | 50| height | <length> \| <percentage><sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/>未设置时组件高度默认为0。 | 51| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/> 该属性可以有1到4个值：<br/>- 指定一个值时，该值指定四个边的内边距。<br/>- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | 52| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | 53| margin | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>- 只有一个值时，这个值会被指定给全部的四个边。<br/>- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。<br/>- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | 54| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | 55| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | 56| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | 57| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | 58| background-color | <color> | - | 否 | 设置背景颜色。 | 59| opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | 60| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>- flex：弹性布局。<br/>- none：不渲染此元素。 | 61| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | 62 63 64## 方法 65 66| 名称 | 参数 | 描述 | 67| -------- | -------- | -------- | 68| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 | 69| rotation | { focus: boolean } | 控制list是否请求旋转表冠的焦点。设置focus参数为true，list将获取旋转表冠的焦点，允许用户通过旋转表冠来滚动选择器中的选项；设置为false将释放旋转表冠的焦点。| 70## 示例 71 72 73```html 74<!-- index.hml --> 75<div class="container"> 76 <list class="todo-wrapper"> 77 <list-item for="{{todolist}}" class="todo-item"> 78 <div style="flex-direction: column;align-items: center;justify-content: center;"> 79 <text class="todo-title">{{$item.title}}</text> 80 <text class="todo-title">{{$item.date}}</text> 81 </div> 82 </list-item> 83 </list> 84</div> 85``` 86 87 88```js 89// index.js 90export default { 91 data: { 92 todolist: [{ 93 title: '刷题', 94 date: '2021-12-31 10:00:00', 95 }, { 96 title: '看电影', 97 date: '2021-12-31 20:00:00', 98 } 99 , { 100 title: '看书', 101 date: '2021-12-31 21:00:00', 102 }, 103 { 104 title: '洗澡', 105 date: '2021-12-31 22:00:00', 106 }, 107 { 108 title: '睡觉', 109 date: '2021-12-31 23:00:00', 110 }], 111 }, 112 onShow() { 113 this.$refs.listObj.rotation({focus: true}) 114 } 115} 116``` 117 118 119```css 120/* index.css */ 121.container { 122 display: flex; 123 justify-content: center; 124 align-items: center; 125 left: 0px; 126 top: 0px; 127 width: 454px; 128 height: 454px; 129} 130.todo-wrapper { 131 width: 454px; 132 height: 500px; 133} 134.todo-item { 135 width: 454px; 136 height: 80px; 137 flex-direction: column; 138} 139.todo-title { 140 width: 454px; 141 height: 40px; 142 text-align: center; 143} 144``` 145 146 147
