1# 添加容器 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fenglinbailu--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。在页面结构相对简单时，可以直接用div作为容器，因为div作为单纯的布局容器，可以支持多种子组件，使用起来更为方便。 10 11 12## List组件 13 14当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下： 15 16```html 17<!-- xxx.hml --> 18<list class="list"> 19 <list-item type="listItem" for="{{textList}}"> 20 <text class="desc-text">{{$item.value}}</text> 21 </list-item> 22</list> 23``` 24 25```css 26/* xxx.css */ 27.desc-text { 28 width: 683.3px; 29 font-size: 35.4px; 30} 31``` 32 33```js 34// xxx.js 35export default { 36 data: { 37 textList: [{value: 'JS FA'}], 38 }, 39} 40``` 41 42为避免示例代码过长，以上示例的list中只包含一个list-item，list-item中只有一个text组件。在实际应用中可以在list中加入多个list-item，同时list-item下可以包含多个其他子组件。 43 44 45## Tabs组件 46 47当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下： 48 49```html 50<!-- xxx.hml --> 51<tabs> 52 <tab-bar> 53 <text>Home</text> 54 <text>Index</text> 55 <text>Detail</text> 56 </tab-bar> 57 <tab-content> 58 <image src="{{homeImage}}"></image> 59 <image src="{{indexImage}}"></image> 60 <image src="{{detailImage}}"></image> 61 </tab-content> 62</tabs> 63``` 64 65```js 66// xxx.js 67export default { 68 data: { 69 homeImage: '/common/home.png', 70 indexImage: '/common/index.png', 71 detailImage: '/common/detail.png', 72 }, 73} 74``` 75 76tab-content组件用来展示页签的内容区，高度默认充满tabs剩余空间。 77
