ionic3滑动菜单的使用方法

1 先引入swiper

<link rel="stylesheet" href="assets/swiper/css/swiper.min.css">
<script src="assets/swiper/js/swiper.min.js"></script>

2 创建页面模板

ionic g page pagemenu1

3 将pagemenu1引入到对应的app.module.ts中

import { Pagemenu1Page } from './../pages/pagemenu1/pagemenu1';
declarations: [Pagemenu1Page ]
entryComponents: [Pagemenu1Page ]

4 在主页面搭建 相关的菜单项

<ion-header>
  <div class="pageMenuSlides">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide {{i==0?'bottomLine':''}}" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu($event,i)">{{item}}{{i}}</div>
      </div>
    </div>
  </div>
  </ion-header>
<ion-slides #contentSlides (ionSlideDidChange)="slideChanged()">
  <ion-slide>
    <page-pagemenu1></page-pagemenu1>
  </ion-slide>
  <ion-slide>
    <page-pagemenu2></page-pagemenu2>
  </ion-slide>
  <ion-slide>
    <page-pagemenu3></page-pagemenu3>
  </ion-slide>
  <ion-slide>
    <page-pagemenu4></page-pagemenu4>
  </ion-slide>
</ion-slides>
.pageMenuSlides {
    border-bottom: 0.55px solid rgba(0, 0, 0, 0.3);
    .swiper-container {
      width: 100%;
      height: 44px;
    }
    .swiper-slide {
      background: #fff;
      color: #333;
    }
    .bottomLine {
      border-bottom: 2px solid #488aff;
    }
  }
  ion-slides {
    background-color: white;
    .slide-zoom {
      height: 100%;
    }
  }

5 相关ts
swiper使用

import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
declare val Swiper    先引入Swiper
swiper:any  声明
@ViewChild('contentSlides') contentSlides: Slides;      声明组件
 items: Array<any> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 0, 1, 2, 3, 4, 5, 6, 7, 8, 0, 1, 2, 3, 4, 5, 6, 7, 8];
  menus: Array<string> = ["滑动菜单", "滑动菜单", "滑动菜单", "滑动菜单"]
  ionViewDidLoad() {
    console.log('ionViewDidLoad Tab3Page');
    this.initSwiper();    初始化调用 
  }
  initSwiper() {
    this.swiper = new Swiper('.pageMenuSlides .swiper-container', {
      slidesPerView: 4,
      spaceBetween: 1,
      breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 1
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 1
        },
        640: {
          slidesPerView: 4,
          spaceBetween: 1
        },
        320: {
          slidesPerView: 4,
          spaceBetween: 1
        }
      }
    });
  }
点击得时候
  selectPageMenu($event, index) {
    this.setStyle(index);
    this.contentSlides.slideTo(index);
  }
  滑动slide的时候
  slideChanged() {
    let index = this.contentSlides.getActiveIndex();
    this.setStyle(index);
    console.log(index)
    this.swiper.slideTo(index, 300);
  }
设置样式
  setStyle(index) {
    var slides = document.getElementsByClassName('pageMenuSlides')[0].getElementsByClassName('swiper-slide');
    if (index < slides.length) {
      for (var i = 0; i < slides.length; i++) {
        var s = slides[i];
        s.className = "swiper-slide";
      }
      slides[index].className = "swiper-slide bottomLine";
    }
  }

相关链接： https://www.jianshu.com/p/e0cb0206136d