鸿蒙ArkTS/ArkUI电商实战系列
本章内容
Tabs导航主框架
效果图：
效果图
示例：
MainPage.ets
// 导入页面路由模块
import Constants from '../common/constants/Constants';
import { BottomTabsList } from '../viewmodel/BottomTabsModel';
import HomePage from './HomePage';
import MinePage from './MinePage';
import MsgPage from './MsgPage';
import ProjectPage from './ProjectPage';
@Preview
@Entry
@Component
struct MainPage {
@State bottomTabIndex: number = 0;
private tabsController: TabsController = new TabsController();
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End, justifyContent: FlexAlign.End }) {
Tabs({ barPosition: BarPosition.End, index: 0, controller: this.tabsController }) {
TabContent() {
HomePage()
}.tabBar(this.TabBuilder(0, 'Home'))
TabContent() {
ProjectPage()
}.tabBar(this.TabBuilder(1, 'Project'))
TabContent() {
MsgPage()
}.tabBar(this.TabBuilder(2, 'Msg'))
TabContent() {
MinePage()
}.tabBar(this.TabBuilder(3, 'Me'))
}
.width(Constants.FULL_PERCENT)
.height(Constants.FULL_PERCENT)
.vertical(false)
.scrollable(false)
.barMode(BarMode.Fixed)
.barHeight(Constants.BAR_HEIGHT)
.onChange((index: number) => {
this.bottomTabIndex = index;
})
}
.width(Constants.FULL_PERCENT)
}
onIndexChange() {
this.tabsController.changeIndex(this.bottomTabIndex);
}
}
相关的源码
