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

  
    Home
  
  

    

      

        
        
{{item}}{{i}}
        
      
    
  



  
    
  

  
    
  

  
    
  

  
    
  
  

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 =['软件工程','计算机','网络工程','信管']
  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

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