• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Adding a Container
2
3
4To 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.
5
6
7## <List>
8
9If 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:
10
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```
23/* xxx.css */
24.desc-text {
25  width: 683.3px;
26  font-size: 35.4px;
27}
28```
29
30
31```
32// xxx.js
33export default {
34  data: {
35    textList:  [{value: 'JS FA'}],
36  },
37}
38```
39
40To shorten the sample code, the list contains only one &lt;list-item&gt; component that holds only one &lt;text&gt; component. In practice, a &lt;list&gt; has multiple &lt;list-item&gt; components, and a &lt;list-item&gt; has multiple child components.
41
42
43## &lt;Tabs&gt;
44
45If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. This component supports the change event, which is triggered after tab switching. A &lt;tabs&gt; component can hold only one &lt;tab-bar&gt; and one &lt;tab-content&gt;. The following is an example:
46
47
48```
49<!-- xxx.hml -->
50<tabs>
51  <tab-bar>
52    <text>Home</text>
53    <text>Index</text>
54    <text>Detail</text>
55  </tab-bar>
56  <tab-content>
57    <image src="{{homeImage}}"></image>
58    <image src="{{indexImage}}"></image>
59    <image src="{{detailImage}}"></image>
60  </tab-content>
61</tabs>
62```
63
64
65```
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
76The &lt;tab-content&gt; component is used to display the tab content, which vertically fills the remaining space of the &lt;tabs&gt; component by default.
77