1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

page-tabs {
.ion-tab-icon-base {
width: 32px !important;
height: 32px !important;
padding: 4px 4px 2px;
    }
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 32px;
    }
$tabImageName: 'home' 'task' 'master' 'my';
    @for $i from 1 to 5 {
.ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
        }
.tabs-md .tab-button[aria-selected=true] {
.ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
            }
        }
.tabs-md .tab-button[aria-selected=false] {
.ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
            }
        }
    }
.ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
width: 30px !important;
height: 32px !important;
    }
}

1
2
3
4
5
6
7
8

<ion-tabs #mainTabs [selectedIndex]="mySelectedIndex">
<ion-tab [root]="homeView" tabTitle="首页" tabIcon="tab-home"></ion-tab>
<ion-tab [root]="taskView" tabTitle="任务" tabIcon="tab-task"></ion-tab>
<ion-tab [root]="courseView" tabTitle="师傅学院" tabIcon="tab-master"></ion-tab>
<ion-tab [root]="userCenterView" tabTitle="我的" tabIcon="tab-my"></ion-tab>
<ion-tab [root]="demoView" tabTitle="DEMO" tabIcon="bug"></ion-tab>
</ion-tabs>