ionic3 tab切换

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

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

html:tabs.html

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:

        

          {{item.name}}
        

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