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