ionic3 tab实现自定义图片替换字体图标

来源：互联网发布：java触屏当乐编辑：程序博客网时间：2024/05/18 03:24

Ionic 自带的图标库固然提供了一系列的字体图标文件供开发者使用，但有时候不一定就能找到开发者想要的图标，而美工又设计出看起来漂亮的tab图标，那么这个时候就需要开发者想方设法的做到美工想要看到的效果了，找了N多资料，终于亲身试验过，可以使用自定义的图片来替换图标的方法，总结一下备忘。上代码：

<ion-tabs name="home">  <ion-tab [root]="tab1Root" tabUrlPath="a" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>  <ion-tab [root]="tab2Root" tabUrlPath="b" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>  <ion-tab [root]="tab3Root" tabUrlPath="c" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>  <ion-tab [root]="tab4Root" tabUrlPath="d" tabTitle="tab4" tabIcon="tab-tab4"></ion-tab>  <ion-tab [root]="tab5Root" tabUrlPath="e" tabTitle="tab5" tabIcon="tab-tab5"></ion-tab></ion-tabs>

在app.scss中添加：

.ion-tab-icon-base {    width: 20px;    height: 20px;    padding: 0px 1px 1px;  }    .ion-tab-icon-md-base {    width: 25px;  min-width: 25px !important;    height: 25px;}    $tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';  @for $i from 1 to 6 {    //for ios    .ion-ios-tab-#{nth($tabImageName, $i)} {      @extend .ion-tab-icon-base;    content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");  }    .ion-ios-tab-#{nth($tabImageName, $i)}-outline {      @extend .ion-tab-icon-base;    content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");    }      // for android    .tabs-md .tab-button[aria-selected=true] {      .ion-md-tab-#{nth($tabImageName, $i)} {        @if $i == 1 {        width: 23px;        min-width: 23px !important;          height: 23px;      } @else if $i == 2{        width: 25px;        min-width: 25px !important;          height: 20px;        padding: 2px 1px 1px;      } @else {        @extend .ion-tab-icon-md-base;        }      content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");      }    }    .tabs-md .tab-button[aria-selected=false] {      .ion-md-tab-#{nth($tabImageName, $i)} {      @if $i == 1 {        width: 24px;        min-width: 24px !important;          height: 24px;      } @else if $i == 2{        width: 25px;        min-width: 25px !important;          height: 18px;      } @else if $i == 3{        width: 22px;        min-width: 22px !important;          height: 25px;      } @else {        @extend .ion-tab-icon-md-base;        }      content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");      }    }  }

好了，完成以上代码后保存一下，然后启动服务看看吧，现在应该已经换成美工设计的图片图标了

阅读全文

0 0