Question

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

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

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

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

另一个例子，但那个是基于Ionic1制作的：

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

任何人都知道如何在Ionic2 / Angular2中实现这一目标？如果你甚至可以分享一个想法，实现同样的步骤，那将是非常有帮助的！

Answer 1

我是通过导入手动完成的的＆＃34; ViewChild＆＃34;来自＆＃39; @ angular / core＆＃39; 和的＆＃34;幻灯片＆＃34;来自＆＃39; ionic-angular＆＃39; `

所以你需要以下列方式获得[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

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

记得从离子角度

导入幻灯片

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


@ViewChild(Slides) slides: Slides;

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

3 个答案: