使用arkts tabs组件搭建静态首页
Tabs,通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
页面代码
@Entry
@Component
struct Index {
@State selectedNum:number=0
async onPageShow():Promise<void> {
}
@Builder
tarBarBuilder(name:string,img:ResourceStr,index:number){
Column(){
Image(img)
.width(20)
.height(20)
.fillColor(this.selectedNum===index?Color.Blue:Color.Black)
Text(name)
.width('100%')
.textAlign(TextAlign.Center)
.fontColor(this.selectedNum===index?Color.Blue:Color.Black)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)
}
build() {
Tabs({index:this.selectedNum}){
TabContent(){
Text('任务')
}.tabBar(this.tarBarBuilder('任务',$r('app.media.ic_tab_btn_task'),0))
TabContent(){
Text('消息')
}.tabBar(this.tarBarBuilder('消息',$r('app.media.ic_tab_btn_mess_nor'),1))
TabContent(){
Text('我的')
}.tabBar(this.tarBarBuilder('我的',$r('app.media.ic_tab_btn_mine_nor'),2))
}.onTabBarClick((index)=>{
this.selectedNum=index
})
.barPosition(BarPosition.End)
}
}
