1. 封装 TabsComp 组件
/// 自定义选项卡组件
@Component
export default struct TabsComp {
private tabsController: TabsController = new TabsController()
// 选项卡下标，默认为第一个
@Link selectIndex: number
@Prop tabTitles: string[]
// @BuilderParam 该装饰器用于声明任意UI描述的一个元素，类似slot占位符。
// 用于传入代码块/函数，类似于block
// 自定义组件插槽（方便外部调用时传入其他子组件），() => void 表示变量是函数类型（一般是构造函数）
@BuilderParam child: () => void
// tabBar 背景颜色
tabBarColor: ResourceColor = Color.White
build() {
Column() {
// barPosition设置Tabs的页签位置，跟vertical属性强关联
// index设置初始页签索引
// controller设置Tabs控制器，用于控制Tabs组件进行页签切换
Tabs({ barPosition: BarPosition.Start, index: this.selectIndex, controller: this.tabsController }) {
ForEach(this.tabTitles, (title: string, index) => {
TabContent() {
this.child() // 在这里插入额外的子组件
}
// 系统TabBar（带过渡动画）
.tabBar(new SubTabBarStyle(title))
})
}
// 可滚动导航栏
.barMode(BarMode.Scrollable)
.barBackgroundColor(this.tabBarColor)
.animationDuration(300)
// 滑动切换导航栏
.onChange((index) => {
// 监听索引index的变化，实现页签内容的切换。
this.selectIndex = index
})
}
.height('100%')
.width('100%')
}
}
2. 组件使用
import TabsComp from '../../components/TabsComp'
@Entry
@Component
export default struct TestPage {
@State selectIndex: number = 0
@State tabTitles: string[] = ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5']
build() {
Column() {
TabsComp({ selectIndex: this.selectIndex, tabTitles: this.tabTitles }) {
Text(`${this.tabTitles[this.selectIndex]}-内容页`).fontSize(30)
}
}
.width('100%')
.height('100%')
.backgroundColor('#f1f2f3')
}
}
3. 效果
