ionic3 tab切换

如果不熟悉 Tabs，也可以去ionicframework官网了解一下。

一、底部tab切换，默认选中第二个

html:tabs.html

<ion-tabs>
  <ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab>
</ion-tabs>

ts:tabs.ts

import { Component,ViewChild} from '@angular/core';
import {Tabs} from 'ionic-angular';
import { PhotoPage } from '../photo/photo';
import { ContactPage } from '../contact/contact';
import { NewsPage } from '../news/news';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tabRoots: Object[];
  @ViewChild('myTabs') tabRef: Tabs;
  constructor() {
    this.tabRoots = [
        {
          root: NewsPage,
          tabTitle: '实时资讯',
          tabIcon: 'logo-designernews'
        },
        {
          root: PhotoPage,
          tabTitle: 'photo',
          tabIcon: 'ios-analytics'
        },
        {
          root: ContactPage,
          tabTitle: 'Contact',
          tabIcon: 'notifications'
        }
      ];

  }
  ionViewDidEnter() {
    this.tabRef.select(2);
  }
}

二、自定义tab切换

html:

<ul>
        <li *ngFor="let item of categoryData, let i = index" (click)="categoryClick(i);">
          <span [ngClass]="{true:'nav-current',false:'nav-blur'}[item.isSelect]">{{item.name}}</span>
        </li>
</ul>

ts:

public categoryData = [];
public select=0;

constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    this.categoryData = this.getCategoryData();
  }

 private getCategoryData() {
    this. categoryData = [{
        name: "潮流女装",
        typeNumber: '102'
      },
      {
        name: "品牌男装",
        typeNumber: '103'
      },
      {
        name: "品牌男装",
        typeNumber: '103'
      }];
      for(var i=0;i<this. categoryData.length;i++){
        if(i==1){
          this. categoryData["isSelect"] = true;
        }else{
         this. categoryData["isSelect"] = false;
        }
      }
    return this.categoryData;

  }

 categoryClick(index: number){
    console.log("index"+index);
   this.categoryData[this.select].isSelect=false;
    let data= this.categoryData[index];
    data.isSelect=true;
    this.select=index;
  };