注意：NativeScript 6 引入了两个新的选项卡导航组件，<BottomNavigation> 和 <Tabs>。这些旨在成为现有 <TabView> 组件的新的更好的替代方案。阅读 此处发布的公告博客文章。

<TabView> 是一个导航组件，它将内容分组到选项卡中，并允许用户在选项卡之间切换。

<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
  <TabViewItem title="Tab 1">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

methods: {
  indexChange: function(args) {
      let newIndex = args.value
      console.log('Current tab index: ' + newIndex)
  }
}

注意：当前，TabViewItem 预期只有一个子元素。在大多数情况下，您可能希望将内容包装在布局中。

在选项卡中添加图标

<TabView :selectedIndex="selectedIndex" iosIconRenderingMode="alwaysOriginal">
  <TabViewItem title="Tab 1" iconSource="~/images/icon.png">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2" iconSource="~/images/icon.png">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

注意：您可以使用图像作为选项卡图标，而不是图标字体。有关如何控制图标大小的更多信息，请参阅 使用资源文件夹中的图像。

Props

事件

原生组件