import { Home } from './home/Home'
|
|
/**
|
* @Description : 底部导航，APP模块
|
* Tabs 选项卡功能
|
*/
|
class TabBarBase {
|
icon: ResourceStr = ''
|
title: string = ''
|
}
|
@Entry
|
@Component
|
struct MainPage {
|
@State tabBarList: TabBarBase[] = [
|
{ icon: 'tabs_home_icon', title: '主页' },
|
{ icon: 'tabs_search_platform_icon', title: '发现' },
|
{ icon: 'tabs_message_icon', title: '消息' },
|
{ icon: 'tabs_account_icon', title: '我的' }
|
]
|
@State selectIndex: number = 0
|
private tabController: TabsController = new TabsController()
|
|
@Builder tabItem(icon: ResourceStr,title: string,index: number){
|
Column({space: 5}){
|
Image($r('app.media.' + icon + (index===this.selectIndex ? '_active' : '' )))
|
.width(22)
|
.height(22)
|
Text(title)
|
.fontSize(14)
|
.fontColor(index === this.selectIndex ? "#1756f4" : '#6a6a6a')
|
}
|
.onClick(() => {
|
this.selectIndex = index
|
this.tabController.changeIndex(this.selectIndex)
|
})
|
}
|
build() {
|
Stack({alignContent: Alignment.Bottom}){
|
Tabs({barPosition: BarPosition.End,controller: this.tabController}){
|
ForEach(this.tabBarList,(item: TabBarBase,index:number) => {
|
TabContent(){
|
if (index === 0) {
|
Home()
|
} else if (index === 1){
|
// SearchPage()
|
} else if (index === 2){
|
// MessagePage()
|
} else if (index === 3){
|
// AccountPage()
|
}
|
}
|
//调用自定义的样式
|
// .tabBar(this.tabItem(item.icon,item.title,index))
|
})
|
}
|
.barHeight(0)
|
.onChange((index: number) => {
|
this.selectIndex = index
|
})
|
|
Row() {
|
ForEach(this.tabBarList, (item: TabBarBase, index) => {
|
this.tabItem(item.icon, item.title, index)
|
})
|
}
|
.justifyContent(FlexAlign.SpaceAround)
|
.width('100%')
|
.height(60)
|
.padding(10)
|
.border({ width: { top: 1 }, color: { top: '#e3e3e3' }, style: { top: BorderStyle.Solid }})
|
.backgroundColor(Color.White)
|
}
|
.width('100%')
|
.height('100%')
|
}
|
}
|
