在TabView中启用滑动

时间:2018-08-03 17:48:40

标签: nativescript angular2-nativescript nativescript-angular

我正在使用NativeScript Angular,并将TabView设置为底部位置。我想允许用户在iOS和Android的标签页之间滑动,但是在jQuery Promise中,它表示当位置设置为底部时,滑动已被禁用。

如何启用TabView上的滑动?

1 个答案:

答案 0 :(得分:0)

在阅读了手势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>

TypeScript:

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