ionic2 slide滑动效果样例

花了两天时间才研究出来的，有需要的朋友可以参考下哦

直接贴代码

1.html代码如下：

<ion-header>

  <ion-navbar no-border-bottom>
    <ion-title>
      最热网游
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
<ion-toolbar>


<div style="background-color:white ;margin-top:1%; ">
<ion-slides #headSlide (ionDidChange)="headSlideChanged()" >
   <ion-slide>
   <ion-row style='border-bottom: 1px solid rgba(29, 161, 244, 0.16);'>
    <ion-col id='col-a' style='padding: 15px;'>
<a class=" has-title has-icon other_ser" style='color:#333' (click)="goSlide(0)">
<div class="test-span">
<span id="a" style="display:block;font-size:2rem;color:blue;">
王者荣耀
 </span>
 
 </div>
</a>
</ion-col>
<ion-col id='col-b' style='padding: 15px;'>
<a class=" has-title has-icon other_ser" style='color:#333' (click)="goSlide(1)">
<div class="test-span">
<span id="b" style="display:block;font-size:2rem;">
穿越火线
 </span>
</div>
</a>
</ion-col>
<ion-col id='col-c' style='padding: 15px;'>
<a class=" has-title has-icon other_ser" style='color:#333' (click)="goSlide(2)">

<div class="test-span">
<span id="c" style="display:block;font-size:2rem;">
 生化危机
 </span>
</div>
</a>
</ion-col> 
<ion-col id='col-d' style='padding: 15px;'>
<a class=" has-title has-icon other_ser" style='color:#333' (click)="goSlide(3)">

<div class="test-span">
<span id="d" style="display:block;font-size:2rem;">
 黑夜传说
 </span>
</div>
</a>
</ion-col> 
  </ion-row> 
  </ion-slide>
  </ion-slides>
 </div>
 <div id='slide-div' class="slide" #slide [style.left]="slidePosition" [style.width]="slideWidth"></div>
 </ion-toolbar>
<ion-slides #myslide (ionDidChange)="slideChanged()" (ionDrag)="onDrag($event)"  >
  <ion-slide>
  <div>
    <h1>Slide AAA</h1>
  </div>
  </ion-slide>
  <ion-slide>
    <h1>Slide BBB</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide CCC</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide DDD</h1>
  </ion-slide>
</ion-slides>

</ion-content>

2.ts代码如下：

import { Component,ViewChild,ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import {UserInfo} from '../user_center/userInfo'; 
import * as $ from "jquery";
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class Home {
@ViewChild('slide') slider: ElementRef;
@ViewChild("myslide") slides: Slides;
home:any = UserInfo;
private slidePosition = '0px';
private slideWidth = '88px';
  constructor(public navCtrl: NavController,private el: ElementRef) {
 console.log(this.el)
 this.home = UserInfo;
 this.slidePosition='5px'
  }


  slideWillChange(){
 console.log("slideWillChange...")
  }
 
  goSlide(index){
 this.slides.slideTo(index, 500);
 this.gotoSlide(index);
 console.log("slideto"+index);
 
  }
  slideChanged() {
 
   let currentIndex = this.slides.getActiveIndex();
   console.log("loadding...slideChanged...",currentIndex)
   
   this.gotoSlide(currentIndex);
 
 }
  
  headSlideChanged(){
   let currentIndex = this.slides.getActiveIndex();
   console.log("loadding...headSlideChanged...",currentIndex)
  }
  
   
     onDrag(event: Slides) {
    console.log("event",event)
    var _translate=(event as any).translate;
    if(_translate>0){
    return;
    }
    var _virtualSize=(event as any).virtualSize;
   
    console.log("_translate...",_translate)
    console.log("_virtualSize...",_virtualSize)
    const percentage = Math.abs(_translate / _virtualSize);
    const singleSlideSize = (event as any).size;
    let slidePosition = percentage*singleSlideSize;
    this.slidePosition=slidePosition+"px";
   
     }
  
}