Ionic2/Angular2 - 如何在视图/页面和标签之间滑动(左右)？

Question

我愿意在标签/页面之间实现向右/向左滑动操作,如下所示:

https://camo.githubusercontent.com/90e2e5abbe8155744d579951b93a1260edef855e/687474703a2f2f692e696d6775722e636f6d2f7a6c66574461312e676966

也可以通过此链接在GitHub上使用(适用于iOS)

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

另一个例子,但那个是基于Ionic1制作的:

www.ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/slidingTabsUsingRepeat.html

任何人都知道如何在Ionic2/Angular2中实现这一目标？如果您可以分享一个想法,实现相同的步骤,它将是非常有帮助的!

Answer 1

我这样做手动通过导入 从"@角/芯"" ViewChild" 和 从"离子-角""幻灯片" `

因此,您需要以下列方式获取[HTML]代码:

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

现在让我分享我的Typescript代码

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;
}

多数民众赞成......快乐的编码...... !!!

Answer 2

目前尚不支持在选项卡之间滑动，但 Ionic 2 将来会支持。

查看我们的 Ionic 2 路线图。如您所见，暂定为 beta-7，beta-6 上周刚刚发布。不过，这只是暂时的。

https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit?usp=sharing