Ionic2/Angular2 - 如何在 views/pages 和标签之间滑动（左右）？

Question

我愿意在 tabs/pages 之间实现滑动 right/left 手势，就像这里的那样：

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

也可以通过此 link 在 GitHub 上使用（对于 iOS）

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

另一个例子，不过那个是基于Ionic1做的：

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

有人知道如何在 Ionic2/Angular2 中实现吗？如果你能分享一个想法，实现相同的步骤，那将非常有帮助！

Answer 1

尚不支持在选项卡之间滑动，但 Ionic 2 将在未来的某个时候支持。

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

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

Answer 2

我是通过导入手动完成的 "ViewChild" 来自“@angular/core” 和 "Slides" 来自 'ionic-angular' `

因此您需要按以下方式获取 [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 3

当需要通过滑动使用分段时应用此选项

home.html

<ion-segment [(ngModel)]="choosetab" >
        <ion-segment-button value="1" (click)="TabChanges()">
          page 1
        </ion-segment-button>
        <ion-segment-button value="2" (click)="TabChanges()">
         page 2
        </ion-segment-button>
        <ion-segment-button value="3" (click)="TabChanges()">
         page 3
        </ion-segment-button>
</ion-segment>

<div [ngSwitch]="choosetab">

    <ion-slides (ionSlideWillChange)="slideChanged()" >
      <ion-slide>
        <ion-list *ngSwitchCase="'1'" >

        </ion-list>
      </ion-slide>
      <ion-slide>
        <ion-list *ngSwitchCase="'2'" >

        </ion-list>
      </ion-slide>
         <ion-slide>
          <ion-list *ngSwitchCase="'3'" >

          </ion-list>
        </ion-slide> 
    </ion-slides>
  </div>

home.ts

 slideChanged() {
  let currentIndex = this.slides.getActiveIndex();

  if (currentIndex == 0) {
    this.choosesegment = '1'
  }
  else if (currentIndex == 1) {
    this.choosesegment = '2'
  }
  else {
    this.choosesegment = '3'
  }

}

将此用于每个分段按钮，（单击）="TabsChanges()"

TabChanges() {
  let len: number = this.slides.length()
  let currentIndex = this.slides.getActiveIndex();
  if (len > 0) {
    if (this.choosesegment === '1') {
      if (currentIndex != 0) {
        this.slides.slideTo(0)

      }
    }
    else if (this.choosesegment === '2') {
      if (currentIndex != 1) {
        this.slides.slideTo(1)

      }
    }
    else if (this.choosesegment === '3') {
      if (currentIndex != 2) {
        this.slides.slideTo(2)
      }
    }
  }
}

记得从 ionic-angular

导入幻灯片

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


@ViewChild(Slides) slides: Slides;

Ionic2/Angular2 - 如何在 views/pages 和标签之间滑动（左右）？

Ionic2/Angular2 - How to swipe (right and left) between views/pages and tabs?

ionic2

angular