ionic3学习笔记(三)

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.ts

import { 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);
  }
}

这里对代码不做太多说明，主要的已经在代码中注释了。

ionic3学习笔记(三)

猜你喜欢