• 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```html
12<!-- xxx.hml -->
13<list class="list">
14  <list-item type="listItem" for="{{textList}}">
15    <text class="desc-text">{{$item.value}}</text>
16  </list-item>
17</list>
18```
19
20```css
21/* xxx.css */
22.desc-text {
23  width: 683.3px;
24  font-size: 35.4px;
25}
26```
27
28```js
29// xxx.js
30export default {
31  data: {
32    textList:  [{value: 'JS FA'}],
33  },
34}
35```
36
37To 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.
38
39
40## &lt;Tabs&gt;
41
42If 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:
43
44```html
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```js
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 &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.
72