スワイプ/スライディングタブイオン性2

Question

material design specのスライディング/スワイプタブを実装したい、これをionic2で実装する方法、Ionic2にスライド/スワイプオプションがありますか？

「いいえ」の場合、他のjqueryプラグインは使用できますか？

<ion-segment [(ngModel)]="query" (ionChange)="showdata()"> 
<ion-segment-button value="slide1"> 
TabTitle1 
</ion-segment-button> 
<ion-segment-button value="slide2"> 
TabTitle2 
</ion-segment-button> 
<ion-segment-button value="slide3"> 
TabTitle3 
</ion-segment-button> 
</ion-segment> 
<ion-slides (ionSlideDidChange)="slideChanged()"> 
<ion-slide> 
Some Content 
</ion-slide> 
<ion-slide> 
Some Content 
</ion-slide> 
<ion-slide> 
Some Content 
</ion-slide> 
</ion-slides> 

活字体コード

：ここ

file.Ts

import {Component} from '@angular/core' 
     import {HomePage} from '../home-page/home-page'; 
     import {AboutPage} from '../about-page/about-page'; 
     import {ContactPage} from '../contact-page/contact-page'; 
     import {LabPage} from '../lab-page/lab-page'; 
     import {SchoolPage} from '../school-page/school-page'; 
     import {StudentPage} from '../student-page/student-page'; 
     import {playPage} from '../play-page/play-page'; 


     @Component({ 
      templateUrl: 'build/pages/tabs/tabs.html' 
     }) 
     export class TabsPage { 
      constructor() { 
      // this tells the tabs component which Pages 
      // should be each tab's root Page 
      this.tab1Root = HomePage; 
      this.tab2Root = AboutPage; 
      this.tab3Root = ContactPage; 
      this.tab4Root = LabPage; 
      this.tab5Root = SchoolPage; 
      this.tab6Root = StudentPage; 
      this.tab7Root = PlayPage; 
      } 
     } 

Answer 1

だからあなたは次のようにあなたの[HTML]コードを持っている必要があり、私のtypescriptファイルmaterial design spec

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="contacts" tabIcon="contacts"></ion-tab> 
    <ion-tab [root]="tab4Root" tabTitle="lab" tabIcon="lab"></ion-tab> 
    <ion-tab [root]="tab5Root" tabTitle="school" tabIcon="school"></ion-tab> 
    <ion-tab [root]="tab6Root" tabTitle="student" tabIcon="student"></ion-tab> 
    <ion-tab [root]="tab7Root" tabTitle="play" tabIcon="play"></ion-tab> 
</ion-tabs> 

のような

import { Component,ViewChild } from '@angular/core'; 
import { Slides } from 'ionic-angular'; 

export class MainPage { 

@ViewChild(Slides) slides: Slides; 
public query : string = 'slide1'; 

showdata(){ 
    if(this.query == 'slide1') 
    { 
    this.slides.slideTo(0,0); 
    } 
    if(this.query == 'slide2') 
    {  
    this.slides.slideTo(1,0); 
    } 
    if(this.query == 'slide3') 
    {  
    this.slides.slideTo(2,0); 
    } 
} 
    // showdata() function ends here !!! 

slideChanged(){ 
    if(this.slides._activeIndex == 0){ 
     this.query = 'slide1'; 
    } 
    if(this.slides._activeIndex == 1){ 
     this.query = 'slide2'; 
    } 
    if(this.slides._activeIndex == 2){ 
     this.query = 'slide3'; 
    } 

    } 

CSS：

.swiper-slide { 
overflow-y: scroll; 
display: block; 
}