Ionic3 Angular项目中如何将水平标签页改为垂直显示

没问题！我帮你把Ionic 3里的水平标签页改成垂直布局，只需要调整HTML结构和自定义CSS就行，步骤很清晰：

1. 修改Tabs页面的HTML结构 #

默认的ion-tabs是水平布局，我们需要把标签栏（ion-tabbar）的位置改成侧边，并设置垂直排列。替换你的HTML代码为下面的内容：

<ion-tabs>
  <!-- 四个标签页的内容配置 -->
  <ion-tab [root]="tab1Root" tabTitle="患者" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="费用" tabIcon="cash"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="日历" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="联系" tabIcon="contacts"></ion-tab>

  <!-- 垂直排列的标签栏，放在左侧 -->
  <ion-tabbar slot="start" mode="md">
    <ion-tab-button tab="tab1">
      <ion-icon name="person"></ion-icon>
      <ion-label>患者</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="cash"></ion-icon>
      <ion-label>费用</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>日历</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab4">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>联系</ion-label>
    </ion-tab-button>
  </ion-tabbar>
</ion-tabs>

• slot="start" 把标签栏固定在页面左侧，要是想放右侧就改成slot="end"
• mode="md" 是为了让iOS和Android平台的标签栏样式更统一，避免出现奇怪的默认布局

2. 添加自定义CSS样式 #

光改HTML还不够，需要写CSS强制调整布局，打开tabs.page.scss（或者对应的全局样式文件），添加下面的样式：

// 让整个标签页容器变成横向flex布局
ion-tabs {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

// 垂直布局左侧标签栏
ion-tabbar[slot="start"] {
  flex-direction: column;
  width: 80px; // 可以根据需求调整标签栏宽度
  height: 100%;
  border-right: 1px solid #f0f0f0; // 加个分隔线区分标签栏和内容区
}

// 让每个标签按钮均分高度，图标和文字居中
ion-tab-button {
  flex: 1;
  justify-content: center;
  text-align: center;
}

// 让内容区域占满剩余的页面空间
ion-tabs > ion-router-outlet,
ion-tabs > ion-tab {
  flex: 1;
  width: calc(100% - 80px); // 减去标签栏的宽度，避免内容被遮挡
}

3. TypeScript代码无需大改动 #

你原来的TS代码保持原样就行，只需要确保每个tabRoot都正确引入了对应的页面组件：

import { Component } from '@angular/core';
import { PatientPage } from '../patient/patient';
import { ExpensesPage } from '../expenses/expenses';
import { EventcalendarPage } from '../eventcalendar/eventcalendar';
import { ContactPage } from '../contact/contact';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
  styleUrls: ['tabs.scss']
})
export class TabsPage {
  tab1Root = PatientPage;
  tab2Root = ExpensesPage;
  tab3Root = EventcalendarPage;
  tab4Root = ContactPage;

  constructor() { }

  ionViewDidLoad() { }

  ionViewDidEnter(){
    /* Android端键盘弹出时隐藏标签页 */
    // this.keyboard.onKeyboardShow().subscribe(()=>{document.body.classList.add('keyboard-is-open')})
    // this.keyboard.onKeyboardHide().subscribe(()=>{document.body.classList.remove('keyboard-is-open')})
  }
}

如果需要保留键盘弹出隐藏标签页的功能，还可以在CSS里加这段：

// 键盘弹出时隐藏标签栏
body.keyboard-is-open ion-tabbar[slot="start"] {
  display: none;
}

小提示 #

• 要是标签文字太长，可以调整标签栏宽度，或者给ion-label加white-space: normal让文字换行
• 测试的时候尽量用真机或者模拟器，浏览器里的预览可能和实际设备有差异

内容的提问来源于stack exchange，提问作者Devi Chappidi