Nativescript Angular TabView Scrollable

Question

我是否知道如何制作TabView Scrollable，使得标签名称不被包装

<TabView selectedIndex="1" (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton> <StackLayout *tabItem="{title: 'Tab 1'}"> <tabone></tabone> </StackLayout> <StackLayout *tabItem="{title: 'Tab 2'}"> <tabtwo></tabtwo> </StackLayout> <StackLayout *tabItem="{title: 'Tab 3'}"> <tabthree></tabfree> </StackLayout> <StackLayout *tabItem="{title: 'Tab 4'}"> <tabfour></tabfour> </StackLayout> <StackLayout *tabItem="{title: 'Tab 5'}"> <tabfive></tabfive> </StackLayout> </TabView>

它看起来像这样。

Answer 1

我不知道任何允许您将tabview设置为可滚动的NativeScript API。所以在过去，我使用ScrollView水平创建了一个自定义选项卡组件。这是一个使用水平滚动视图的一个很好的例子：http://www.nativescriptsnacks.com/snippets/2016/05/30/horizontal-scroller.html。然后根据点击的按钮显示和隐藏不同的部分。

Answer 2

NativeScript-angular ~5.2.0提供了它。谢谢NS！

在这里你可以证明官方简单的实现：

https://docs.nativescript.org/angular/cookbook/tab-view-ng

_automaticallyAdjustsScrollViewInsets方法负责这样做。

https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview

<强>截图：

我希望这有帮助！