关于icon的tabs-icons使用自定义png jpg图片

最新推荐文章于 2024-01-25 16:09:57 发布

原创最新推荐文章于 2024-01-25 16:09:57 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #tab-icon

css 专栏收录该内容

2 篇文章

订阅专栏

先看效果：
里面的图标都是我用png的图片展示的
在这里插入图片描述

scss:将图片定义到css中

ion-icon {
  &[class*="custom-"] {
    margin: 0 5px 0 0;
    vertical-align: middle;
    $sz: 20px;
    width: $sz;
    height: $sz;
  }
  // custom icons
  &[class*="home-on"] {
    background: url(../assets/imgs/tabs/icon-home-on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="home-off"] {
    background: url(../assets/imgs/tabs/icon-home-off.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="contact-on"] {
    background: url(../assets/imgs/tabs/icon-contact-on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="contact-off"] {
    background: url(../assets/imgs/tabs/icon-contact-off.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="notice-on"] {
     background: url(../assets/imgs/tabs/icon-notice-on.png) no-repeat 50% 50%;
     background-size: contain;
   }
  &[class*="notice-off"] {
    background: url(../assets/imgs/tabs/icon-notice-off.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="owner-on"] {
    background: url(../assets/imgs/tabs/icon-onwer-on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="owner-off"] {
    background: url(../assets/imgs/tabs/icon-owner-off.png) no-repeat 50% 50%;
    background-size: contain;
  }
}

HTML: 添加tabs切换的方法，还有判断tabs选中的状态

<ion-tabs>
 <ng-container *ngFor = "let tabRoot of tabRoots;let i = index;">
    <ion-tab  (ionSelect)="onChange(i)" [root] = "tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" 				tabIcon="{{ tabsIndex == i ? tabRoot.tabIconOn:tabRoot.tabIconOff }}"></ion-tab>
  </ng-container>
</ion-tabs>

ts:自定义tabRoots数组，tabIconOn为选中图片，tabIconOff为未选择图片

 tabsIndex;
    this.tabRoots = [{
      root: HomePage,
      tabTitle: '首页',
      tabIconOn: 'custom-home-on',
      tabIconOff: 'custom-home-off',
        index:0
    }, {
      root: ContactPage,
      tabTitle: '通讯录',
        tabIconOn: 'custom-contact-on',
        tabIconOff: 'custom-contact-off',
        index:1
    }, {
      root: NoticePage,
      tabTitle: '消息',
      tabIconOn: 'custom-notice-on',
        tabIconOff: 'custom-notice-off',
        index:2
    }, {
      root: MinePage,
      tabTitle: '我的',
        tabIconOn: 'custom-owner-on',
        tabIconOff: 'custom-owner-off',
        index:3
    }];

还有tabs切换的方法：

 onChange(e){
      this.tabsIndex =e;
    }