前言
当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。[Tabs]组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。
Tabs-基本用法
@Entry
@Component
struct Index{
build() {
Tabs(){
TabContent(){
Text('hello')
}.tabBar('首页')
TabContent(){
Text('goods')
}.tabBar('商品')
}
}
}
Tabsr-常用属性
- 垂直导航
- 导航位置
- 禁用滑动切换
通过 Tabs 的属性进行调整:
- vertical 属性即可调整导航为 水平 或 垂直
- barPosition 即可调整导航位置为 开头 或 结尾
- scrollable 即可调整是否允许 滑动切换
- animationDuration 设置动画时间 毫秒
@Entry
@Component
struct Index{
build() {
Tabs(){
TabContent(){
Text('hello')
}.tabBar('首页')
TabContent(){
Text('goods')
}.tabBar('商品')
}
.barPosition(BarPosition.End) // 位置
.vertical(true) // 纵向
.scrollable(false) // 滑动切换
.animationDuration(4000) // 动画持续时间
}
}
Tabs-滚动导航栏
如果导航栏的内容较多,屏幕无法容纳时,可以将他设置为滚动
可以通过 Tabs 组件的 barMode 属性即可调整 固定导航栏 或 滚动导航栏
@Entry
@Component
struct Index{
build() {
Tabs(){
TabContent(){
Text('hello')
}.tabBar('首页')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
TabContent(){
Text('goods')
}.tabBar('商品')
}
.barMode(BarMode.Scrollable)// 滚动
}
}
Tabs-自定义
TabBar 如果放在底部的话,一般会显示图形和文字, 甚至有特殊的图标, 如果要实现此类效果,就需要 自定义tabBar
@Entry
@Component
struct Index {
build() {
Tabs() {
TabContent() {
Text('首页')
}
.tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_0'), '首页'))
TabContent() {
Text('我的')
}
.tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_3'), '我的'))
}
.barPosition(BarPosition.End)
}
@Builder
tabBarBuilder(img: ResourceStr, text: string) {
Column() {
Image(img)
.width(30)
Text(text)
}
}
}