一、Tabs
Tabs组件是一种常见的用户界面(UI)组件,它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签,用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合,以提高页面的可维护性和可用性。
Tabs组件的主要功能包括:
切换选项卡:用户可以通过点击标签来切换显示面板。
激活状态:当前选中的标签会呈现激活状态,以便用户清楚地知道他们当前所在的选项卡。
自定义选项卡内容:用户可以通过自定义选项卡内容(例如图片、文本、图标等)来增强页面的可读性和可用性。
加载延迟:如果页面需要加载大量数据或内容,Tabs组件可以通过延迟加载未激活的面板来提升页面性能。
@Entry
@Component
struct Index {
build() {
Column(){
Tabs(){
//首页
TabContent(){
Text('首页的内容').fontSize(30)
}
.tabBar('首页').borderColor(Color.Red)
//分类
TabContent(){
Text('分类').fontSize(30)
}
.tabBar('分类')
//购物车
TabContent(){
Text('购物车').fontSize(30)
}
.tabBar('购物车')
//我的
TabContent(){
Text('我的').fontSize(30)
}
.tabBar('我的')
}
}
}
}