可滚动标签 nativescript

Question

我正在使用带有新选项卡的 nativescript 开发一个应用程序，我至少需要 8 个，但我无法使此选项卡可滚动，它们看起来像这样堆积在同一视图中。

my-tabs

如何制作滚动条？我尝试添加带有堆栈布局的 Scrollview，但我的选项卡崩溃了。

我的代码：

<Tabs selectedIndex="0" swipeEnabled="true">
  <!-- Tabs -->
  <TabStrip>
    <TabStripItem>
      <Label text="Home"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Account"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
  </TabStrip>

  <!-- Contenido tabs -->
  <TabContentItem>
    <GridLayout>
      <Label text="Home Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Account Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
</Tabs>

Answer 1

解决即可，只需要将iOSTabBarItemsAlignment="leading"放入Tabs元素即可

可滚动标签 nativescript

Scrollable tabs nativescript

nativescript

nativescript-angular