NativeScript-Vue-Examples

该 BottomNavigation 组件提供了一种在不同视图之间导航的简单方法，同时为 iOS 和 Android 平台提供了通用的 UI。推荐适合的方案 BottomNavigation 是具有 3 至 5 个选项卡的高级导航，每个选项卡具有单独的功能。有关底部导航的更多信息和详细信息，请参考《材料设计指南》 (opens new window)。

该 BottomNavigation 组件综述：

组件主要目标：

  • 用于高级导航。
  • 适用于 UX 结构，具有 3 至 5 个不同的选项。
  • 更好地控制样式（与相比 TabVIew）。

局限性

  • 没有导航过渡。
  • 没有导航手势（例如，滑动即可导航）。
  • 没有内容预加载。

# 用法

该 BottomNavigation 组件包含两个子组件：

  • 在 TabStrip 其定义并呈现底杆和它的 TabStripItem 部件。
  • 多个 TabContentItem 组件，总数应等于选项卡的数量（TabStripItem 组件）。每个都 TabContentItem 充当标签内容的容器。
  • HTML
  • CSS 
<BottomNavigation selectedIndex="1">
    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <TabStrip>
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas t-36"></Image>
        </TabStripItem>
    </TabStrip>
    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <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>
</BottomNavigation>

WARNING

注意：TabStripItem 组件数必须等于 tabContentItem 组件数。

# 造型

  • CSS
  • HTML 
TabStripItem.tabstripitem {
  background-color: teal;
}
TabStripItem.tabstripitem:active {
  background-color: yellowgreen;
}
TabContentItem.first-tabcontent {
  background-color: seashell;
  color: olive;
}
TabContentItem.second-tabcontent {
  background-color: slategray;
  color: aquamarine;
}
TabContentItem.third-tabcontent {
  background-color: blueviolet;
  color: antiquewhite;
}
.fas {
  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
  font-weight: 900;
}
.t-36 {
  font-size: 36;
}

# 性质

# BottomNavigation 属性

名称 类型 描述
items Array<TabContentItem> 获取或设置 BottomNavigation 的项目。
selectedIndex number 获取或设置 BottomNavigation 的 selectedIndex。
tabStrip TabStrip 获取或设置 BottomNavigation 的标签栏。

# TabStrip 属性

名称 类型 描述
iosIconRenderingMode “自动”，“总是原始”，“总是模板” 获取或设置 iOS 上的图标渲染模式。
isIconSizeFixed boolean 设置为 true 图标时，将遵循特定于平台的设计准则来固定大小。默认值：true。
items Array<TabStripItem> 获取或设置 TabStrip 的带状项目的数组。

# TabStripItem 属性

名称 类型 描述
title string 获取或设置标签栏条目的标题。
iconSource string 获取或设置标签栏条目的图标源。支持本地图像路径（~），资源图像（res://）和图标字体（font://）
image Image 获取或设置标签栏条目的图像。
label Label 获取或设置标签条条目的标签。

# 大事记

# 底部导航事件

名称 描述
selectedIndexChanged selectedIndex 更改属性时发出。
loaded 加载视图时发出。
unloaded 卸载视图时发出。
layoutChanged 当视图的布局边界由于布局处理而改变时发出。

# TabStrip 事件

名称 描述
itemTap TabStripItem 轻按 a 时发出。

# TabStripItem 事件

名称 描述
tap TabStripItem 轻按 a 时发出。

# API 参考

名称 类型
底部导航 (opens new window) Class
标签条 (opens new window) Class
TabStripItem (opens new window) Class
TabContentItem (opens new window) Class

# 本机组件

安卓系统 的 IOS
框架布局 (opens new window) UITabViewController (opens new window)

← Tabs →