要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是 div、list 和 tabs。在页面结构相对简单时，可以直接用 div 作为容器，因为 div 作为单纯的布局容器，使用起来更为方便，可以支持多种子组件。
当页面结构较为复杂时，如果使用 div 循环渲染，容易出现卡顿，因此推荐使用 list 组件代替 div 组件实现长列表布局，从而实现更加流畅的列表滚动体验。但是， list 组件仅支持 list-item 作为子组件，因此使用 list 时需要留意 list-item 的注意事项。具体的使用示例如下：
<!-- xxx.hml -->
<list class="list">
<list-item type="listItem" for="{{textList}}">
<text class="desc-text">{{$item.value}}</text>
</list-item>
</list>
/* xxx.css */
.desc-text {
width: 683.3px;
font-size: 35.4px;
color: #000000;
}
// xxx.js
export default {
data: {
textList: [{value: 'JS FA'}],
},
}
为避免示例代码过长，以上示例的list中只包含一个list-item，list-item中只有一个text组件。在实际应用中可以在list中加入多个list-item，同时list-item下可以包含多个其他子组件。
当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下：
<!-- xxx.hml -->
<tabs>
<tab-bar class="tab-bar">
<text style="color: #000000">tab-bar</text>
</tab-bar>
<tab-content>
<image src="{{tabImage}}"></image>
</tab-content>
</tabs>
/* xxx.css */
.tab-bar {
background-color: #f2f2f2;
width: 720px;
}
// xxx.js
export default {
data: {
tabImage: '/common/image.png',
},
}
tab-content组件用来展示页签的内容区，高度默认充满tabs剩余空间。tab-content支持scrollable属性，详见tab-content。
备案信息： 粤ICP备15087711号-2
Copyright © 2008-2024 啊嘎哇在线工具箱 All Rights.
本站所有资料来源于网络，版权归原作者所有，仅作学习交流使用，如不慎侵犯了您的权利，请联系我们。