ionic3实现左右滑动菜单
这里使用了swiper来实现滑动效果:
swiper查看:http://www.swiper.com.cn/
1.创建一个ionic项目,并生成menu1,menu2,menu3.menu4四个组件,并在app.module.ts里注册这四个组件
2.引入swiper
(1)在assets文件夹里引入swiper的js和css。
(2)在index.xml引入
2.home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
<div class="pageMenuSlides">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- {{i==0?'bottomLine':''}}是初始化的时候默认选择第一个菜单 -->
<div class="swiper-slide {{i==0?'bottomLine':''}}" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu(i)">{{item}}{{i}}
</div>
</div>
</div>
</div>
</ion-header>
<ion-slides #contentSlides (ionSlideDidChange)="slideChanged()">
<ion-slide>
<page-menu1></page-menu1>
</ion-slide>
<ion-slide>
<page-menu2></page-menu2>
</ion-slide>
<ion-slide>
<page-menu3></page-menu3>
</ion-slide>
<ion-slide>
<page-menu4></page-menu4>
</ion-slide>
</ion-slides>
3 home.css
page-home { .pageMenuSlides{ //设置菜单栏底部的颜色 border-bottom:1px solid rgb(255, 255, 255); .swiper-container{ width: 100%; height: 40px; } .swiper-slide{ //设置菜单栏的颜色 background: rgb(255, 255, 255); //设置字体颜色 color: #0c0c0c; } .bottomLine{ //设置当前菜单底部边框 border-bottom: 2px solid rgb(43, 169, 241) } }
ion-slides { .slide-zoom { height: 100%; } }
}
4.home.tsimport { Component, ViewChild } from '@angular/core'; import { NavController, Slides } from 'ionic-angular'; //声明一个Swiper对象,是全局的引用 declare var Swiper; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { swiper :any; //ViewChild传入一个字符串contentSlides,变量contentSlides接收。其它不变 @ViewChild('contentSlides') contentSlides: Slides; menus:Array<string> =['软件工程','计算机','网络工程','信管'] constructor(public navCtrl: NavController) { } //当页面加载的时候触发,只触发一次,当有缓存的的时候,打开页面时不在加载 ionViewDidLoad(){ this.initSwiper(); } //初始化swiper initSwiper() { this.swiper = new Swiper('.pageMenuSlides .swiper-container',{ //设置slider容器能够同时显示的slides数量( slidesPreView:4, //slide之间的距离(单位px) spaceBetween:0, //断点设定:根据屏幕宽度设置某参数为不同的值 breakpoints:{ 1024: { slidesPerView: 4, spaceBetween: 0 }, 768: { slidesPerView: 4, spaceBetween: 0 }, 640: { slidesPerView: 4, spaceBetween: 0 }, 320: { slidesPerView: 4, spaceBetween: 0 } } }); } //选择菜单 selectPageMenu(index){ this.setStyle(index); //切换页面 this.contentSlides.slideTo(index); } //选择菜单之后设置菜单样式 setStyle(index){ //得到菜单的个数 var slides=document.getElementsByClassName('pageMenuSlides')[0].getElementsByClassName('swiper-slide'); //给所有的菜单都设置上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"; } } slideChanged() { //getActiveIndex()获得当前页面的index let index = this.contentSlides.getActiveIndex(); this.setStyle(index); //s切换菜单 this.swiper.slideTo(index, 300); } }
这里对代码不做太多说明,主要的已经在代码中注释了。