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