Question

我浏览了过去的帖子，但找不到很多帮助。有什么方法可以实现Ionic Framework中的功能以允许在应用程序的页面之间滑动？例如，您将应用程序打开到主页，并且在屏幕上从右向左滑动手指将带您进入新页面。

下图显示了我想要的示例

感谢您的帮助。

Answer 1

不直接支持滑动单独的页面。但是，您可以使用Ionic slides。

使用幻灯片时，您需要将所有内容都放在一个页面中（即单个.TS和.html文件），并根据所使用的幻灯片编号显示不同的内容。这意味着您实际上显示了三页，每张幻灯片一张，但是您将它们全部编码在一个Ionic页上（单个.TS和.html文件）。

您将需要状态变量curPage来存储随着用户滑动而变化的当前幻灯片编号。使用*ngIf='curPage=1'，您可以显示虚拟页面1的内容。

您可以使用Ionic tabs，该页面支持单独的页面，但它们是选项卡且不可滑动。

Answer 2

这是我为这个确切目的而创建的sideswipe指令。

import { AfterViewInit, Directive, ElementRef, EventEmitter, Output, Renderer2 } from "@angular/core";
import { SWIPE_DIRECTION } from "../constants/constants";

@Directive({
  selector: '[sideSwipe]'
})
export class SwipeDirective implements AfterViewInit {
  @Output() swipeLeft: EventEmitter<any>;
  @Output() swipeRight: EventEmitter<any>;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {
    this.swipeRight = new EventEmitter<any>();
    this.swipeLeft = new EventEmitter<any>();
  }

  ngAfterViewInit() {
    this.renderer.listen(this.elRef.nativeElement, 'swipeend', (event: any) => {
      if (event.direction === SWIPE_DIRECTION.rightToLeft) {
        this.swipeLeft.emit();
      } else {
        this.swipeRight.emit();
      }
    });
  }
}

SWIPE_DIRECTION是带有两个道具的常量：

export const SWIPE_DIRECTION = {
  rightToLeft: 2,
  leftToRight: 1
};

确保您声明并导出sideswipe指令。然后在您的html中使用，如下所示：

<ion-content sideSwipe (swipeLeft)="nextPage()" (swipeRight)="previousPage()">
</ion-content>

当然，一个警告是，您需要将此指令应用于要使用滑动功能的所有页面。请注意，它不提供任何动画。

Answer 3

您可以使用super-tabs.，除了可以使用Ionic标签之外，还可以使用以下相同的方式实现它们：

<super-tabs>
<super-tab [root]="page1" title="First page"></super-tab>
<super-tab [root]="page2" title="Second page"></super-tab>
<super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>

使用Ionic幻灯片也可以，但根据复杂程度，在使用页眉，页脚，刷新器和无限滚动之类的内容时会遇到问题。

离子在页面之间滑动

3 个答案: