在 TabView 中启用滑动

Question

我正在使用 NativeScript Angular 并且有一个设置为底部位置的 TabView。我想允许用户在 iOS 和 Android 上的选项卡之间滑动，但在 TabView docs 中它说当位置设置为底部时滑动已被禁用。

如何在 TabView 上启用滑动？

Answer 1

在阅读了有关手势的信息后 API 我最终通过向 TabView 添加滑动事件侦听器来完成此操作：

HTML:

<TabView #tabview (swipe)="onSwipe($event)" androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Start', iconSource: getIconSource('play')}"
        name="startTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Settings', iconSource: getIconSource('settings')}"
        name="settingsTab">
    </page-router-outlet>

</TabView>

打字稿：

@ViewChild("tabview") tabview!: ElementRef<TabView>;
...
  onSwipe(event: SwipeGestureEventData) {
    if (this.tabview.nativeElement.selectedIndex === 0 && event.direction === SwipeDirection.left){
      this.tabview.nativeElement.selectedIndex = 1;
    } else if(this.tabview.nativeElement.selectedIndex === 1 && event.direction === SwipeDirection.right){
      this.tabview.nativeElement.selectedIndex = 0;
    }
  }
...

在 TabView 中启用滑动

Enable swipe in TabView

nativescript

angular2-nativescript

nativescript-angular