ionic 3学習ノート(三)

4188 ワード

イオナイス3

ionic 3左右スライドメニューを実現

ここではswiperを使用してスライド効果を実現します.
swiperの表示:http://www.swiper.com.cn/
1.ionicプロジェクトを作成し、menu 1,menu 2,menu 3を生成する.menu 4の4つのコンポーネント、app.module.tsにはこの4つのコンポーネントが登録されています
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
  
ここではコードについてあまり説明しないで、主にコードに注釈しました.

MySQL学習ノート(五)

sqlレコード2