ionic4 左右滑动菜单的实现swiper+slides

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