鸿蒙ArkTS/ArkUI电商实战-主框架导航

鸿蒙ArkTS/ArkUI电商实战系列

• 闪屏页
• 主框架导航
• 首页
• 注册页
• 登录页
• 个人中心
• 分类页
• 聊天页
• 全局添加加载loading提示

本章内容

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);
  }

}

相关的源码