鸿蒙UI系统组件11——标签页导航(Tabs)

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下面名片关注公众号。

1、概述

当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。

2、基本布局

Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。Tabs组件布局示意图如下:

图片

有以下几点需要注意:

  • TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。

  • TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs使用花括号包裹TabContent,其中TabContent显示相应的内容页,代码组织示意如下图:

图片

每一个TabContent对应的内容需要有一个页签,可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar,可以设置其对应页签中的内容,tabBar作为内容的页签。

 TabContent() {
  
     Text('首页的内容').fontSize(30) }.tabBar('首页')

设置多个内容时,需在Tabs内按照顺序放置,代码如下:

Tabs() {
  
    TabContent() {
  
      Text('首页的内容').fontSize(30)  }  .tabBar('首页')  TabContent() {
  
      Text('推荐的内容').fontSize(30)  }  .tabBar('推荐')  TabContent() {
  
      Text('发现的内容').fontSize(30)  }  .tabBar('发现')    TabContent() {
  
      Text('我的内容').fontSize(30)  }  .tabBar("我的")}

3、底部导航

底部导航是

在Antd的Tabs组件中,当标签页数量过多时,会自动出现滚动条,使用户可以通过滚动来查看所有标签页。下面我们就来分析一下Antd是如何实现这个滚动效果的。 ## 实现原理 Antd中Tabs的滚动效果是通过设置`overflow-x: auto`来实现的,当标签页数量超过一定数量时,Tabs容器的宽度会缩小,出现水平滚动条。 具体实现代码如下: ```css .ant-tabs-bar { position: relative; margin: 0; padding: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-overflow-scrolling: touch; .ant-tabs-nav-container { height: 100%; display: inline-flex; align-items: stretch; } } ``` 从上面的代码中可以看出,Antd将Tabs容器的`overflow-x`属性设置为auto,这样当标签页数量过多时,会自动出现水平滚动条;同时还设置了一些其他属性,比如`white-space: nowrap`来防止标签页换行,`-webkit-overflow-scrolling: touch`来优化iOS设备的滚动体验等。 ## 注意事项 使用Antd的Tabs组件时,需要注意以下几点: 1. 需要设置Tabs容器的宽度,否则滚动条不会出现; 2. 如果标签页数量较少,Tabs容器的宽度会很大,导致页面布局不美观,需要进行调整; 3. 当标签页数量很多时,滚动体验可能会受到影响,需要根据实际情况进行优化。 ## 总结 Antd的Tabs组件通过设置`overflow-x: auto`来实现标签页滚动效果,同时还设置了一些其他属性来优化用户体验。在使用该组件时,需要注意设置Tabs容器的宽度,并根据实际情况进行优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值