Tab页-------------ionic3+anjular4(一)

ionic3

最近使用ionic3 +anjular4 开发了小App,在写之前对文档看的不够透彻，基本上是现写现看。中间遇到了一些问题，以下是一些总结。

1.tab页之间的跳转

关于tab页的跳转，官方文档其实都有例子。主要分为同级tab之间的跳转和整个root的跳转, 还有根据实际情况需要的跳转。

• 同级tab跳转
  ionic 官方文档—NavController

import { NavController } from 'ionic-angular';
import { Page } from 'Page路径';

@component({
    templateUrl:'html路径'
})
export class MyAccount(组件名称){
  constructor(public navCtrl: NavController) {

  }
  //跳转页面的方法，在html里点击执行
  push() {
      this.navCtrl.push(Page);        //Page为要跳转的页面，须在头部导入
  }

}

• Root跳转
  ionic 官方文档—App

import { NavController,App } from 'ionic-angular';
import { Page } from 'Page路径';

@component({
    templateUrl:'html路径'
})
export class MyAccount(组件名称){;
  constructor(public navCtrl: NavController,public app:App) {

  }
  //跳转页面的方法，在html里点击执行
  push() {
      this.app.getRootNav().push(Page);        //Page为要跳转的页面，须在头部导入
  }

}

• 按需跳转
  有时候我们需要在某一页面完成操作后，返回后要跳到某个tab页。此时，回到上一页可能不是我们需要的页面，跳转tab页面可能不是我们想要的一页，根跳转可能会让tab页消失。此时我们可以根据传值的方式。

  1)导入tabPage, 让页面跳转，同时传过去一个参数设为index;
  2)在tab.ts里，定义index— this.index=params.data.index;
  3)在tab.html里设置，这样就可以跳到自己想去的tab页了。

2.自定义tab图标

大部分情况下，官方icon库并不能满足我们的设计要求，这时候就需要导入ui专门设计的图标了，一般为iconfont. 将需要的文件放在font文件夹里，放在asset下面。
F12，通过观察tab图标的样式，会发现通过(name=”)定义的图标一共有3种，样式如下：

    .icon-ios-name-before:before {content:''};//为选择时样式
    .icon-ios-name-outline:before {content:''};//点击选中后样式
    .icon-md-name:before {content:''};//安卓下的样式

通过iconfont.css 找到我们需要的icon的样式，假设为’\e7a2’, ‘\e7a3’, ‘\e7a4’,定义一个name为’tsak’的图标如下：

    .icon-ios-task-before:before {
        content:'\e7a2';
    };
    .icon-ios-task-outline:before {
        content:'\e7a3';
    };
    .icon-md-task:before: {
        content:'\e7a4';
    };

在需要此图标的tab地方写入[tabIcon=’task’],执行出来后会发现图标为一个小方块，样式并没有显示出来。在F12 里加上一个icon类就显示了，回到iconfont.css里进行修改：

@font-face {font-family: "iconfont";}//css一开始就定义了这些样式的类--iconfont
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}//定义了iconfont的样式

我们需要做的就是把我们新加的图标也设置这个类

.iconfont,[class$="-task"], [class$="-task-outline"] {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这样的话，样式就生效了。页面中图标已经生效。新加入的写法为css里class的筛选表示以-task & -task-outline 结尾的类。我们只定义一个图标的话这样的写法挺简单，但是一般都是多个，如果写一大堆，这样的定义还是比较多的，因此，我们在自定义图标名字的时候不妨给它们都加上一个统一的后缀，假设加一个myIcon,这样原来的样式就变为了：

    .icon-ios-task-myIcon-before:before {content:'\e7a2';};
    .icon-ios-task-myIcon-outline:before {content:'\e7a3';};
    .icon-md-task-myIcon:before: {content:'\e7a4';};

    .iconfont,[class$="-myIcon"], [class$="-myIcon-outline"]

    <ion-tab [root]=" " tabTitle=" " tabIcon="task-myIcon"></ion-tab>

到此为止，大功告成！