1# Adding a Container<a name="EN-US_TOPIC_0000001062990841"></a> 2 3- [<List\>](#section1875054932714) 4- [<Tabs\>](#section91861363535) 5 6To assemble the basic elements of a page, you need a container component. The **<div\>**, **<list\>**, and **<tabs\>** components are commonly used for laying out page elements. You can use **<div\>** as the container in a page with simple layout. **<div\>** supports a variety of child components required to build the page. 7 8## <List\><a name="section1875054932714"></a> 9 10If you use **<div\>** repeatedly to render a complex page, frame freezing may occur. In this case, use the **<list\>** component instead of **<div\>** to lay out list items, which provides a smooth list scrolling. Note that **<list\>** supports only **<list-item\>** as it child components. The following is an example: 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 38To shorten the sample code, the list contains only one **<list-item\>** component that holds only one **<text\>** component. In practice, a **<list\>** has multiple **<list-item\>** components, and a **<list-item\>** has multiple child components. 39 40## <Tabs\><a name="section91861363535"></a> 41 42If your page needs to be dynamically loaded, use the **<tabs\>** component. This component supports the change event, which is triggered after tab switching. A **<tabs\>** component can hold only one **<tab-bar\>** and one **<tab-content\>**. The following is an example: 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 71The **<tab-content\>** component is used to display the tab content, which vertically fills the remaining space of the **<tabs\>** component by default. 72 73
