1、html
<ion-header>
<ion-toolbar color="primary">
<ion-title>滑动菜单</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let slide of slides; let i = index;" (click)="onSlideDidChange(i,slide)">
<span class="slide-title-unit"
[ngClass]="{'slide-title-active': slideOpts.initialSlide == i}">{{slide}}</span>
</ion-slide>
</ion-slides>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
2、css
.slide-title-unit {
font-size: 1.0rem;
color: white;
}
.slide-title-active {
border-bottom: 3px solid yellow;
color: yellow;
}
3、ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
slides: any[] = ['设备详情', '附属设备', '关联备件', '巡检信息', '润滑信息', '设备图片'];
slideOpts = {
initialSlide: 0, // 默认页
slidesPerView: 4 // 每页显示个数
};
constructor() { }
ngOnInit() {
}
onSlideDidChange(index: any) {
console.log(index);
this.slideOpts.initialSlide = index;
}
}
4、最后效果
1572239754487.gif
