• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

鸿蒙OS 添加外部容器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

要将页面的基本元素组装在一起,需要使用容器组件。在页面布局中常用到三种容器组件,分别是 div、list 和 tabs。在页面结构相对简单时,可以直接用 div 作为容器,因为 div 作为单纯的布局容器,使用起来更为方便,可以支持多种子组件。

List 组件

当页面结构较为复杂时,如果使用 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组件。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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
鸿蒙OS 添加交互发布时间:2022-02-02
下一篇:
鸿蒙OS 添加留言区域发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap