Uni-app入门到精通：tabBar节点实现多页面的切换

  tabBar节点用于实现多页面的切换。对于一个多tabBar应用，可以通过tabBar节点配置项指定一级导航栏，以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置，不仅是为了方便快速开发导航，更重要的是提示App平台和小程序平台的性能。tabBar节点的常用属性如下：

属性	类型	默认值	描述
color	HexColor		用于设置tabBar上的文字默认颜色，必填
selectedColor	HexColor		用于设置tabBar上的文字被选中时的颜色，必填
backgroundColor	HexColor		用于设置tabBar的背景颜色
borderStyle	String	black	用于设置tabBar上边框的颜色，可选值有black/white
list	Array		用于设置tabBar的列表，最少有2个，最多有5个

list接收一个数组，数组中每一项都是一个对象。list数组中对象的属性如下：

属性	类型	描述
gagePath	String	用于设置页面路径，必须在pages节点中先定义，必填
text	String	用于设置tabBar上的按钮文字，在App和H5平台非必填
iconPath	String	用于设置图片路径，icon大小限制为40KB，建议尺寸为81px×81px，当position为top时，此属性无效，不支持网络图片和字体图标
selectedlconPath	String	选中图片的路径，图片要求与iconPath的一致

  实现一个有两个页面的tabBar页面的应用。

  在本例中，沿用前面的uniappch02项目，新建两个tabBar页面，分别为基础组件页和flex布局页。在内置浏览器上显示的效果如下：

实现步骤

（1）准备tabBar上的图标。打开iconfont官网，在搜索框中输入”组件“。

  下载具有两种颜色（亮色，暗色）的、尺寸为64px×64px的png格式的同一种透明图片。再下载一组”flex“图标，然后将下载的图标复制到static。

（2）新建页面。在pages节点上点击，在弹出的列表中选择【新建页面】，打开【新建uni-app页面】窗口，输入文件名，单击【创建】按钮。

新建compony.vue、flex.vue文件。

打开compony.vue、flex.vue文件，分别在<view></view>之间输入内容：基础组件演示、弹性盒子布局flex。如以下：

<template><view>基础组件演示</view>
</template>

<template><view>弹性盒子布局flex</view>
</template>

（3）修改pages.json文件。打开pages.json文件，可以看到在pages节点多了两个页面。将compony页面移到第一项，并修改navigationBarTitleText属性，然后新增tabBar节点。

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path" : "pages/compony/compony","style" :                                                                                    {"navigationBarTitleText": "基础组件","enablePullDownRefresh": false}},{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/flex/flex","style" :                                                                                    {"navigationBarTitleText": "flex布局","enablePullDownRefresh": false}}],"tabBar":{"backgroundColor": "#F8F8F8","color": "#8F8F94","list": [{"text": "组件","pagePath": "pages/compony/compony","iconPath": "static/开发组件.png","selectedIconPath": "static/开发组件 (1).png"},{"text": "flex布局","pagePath": "pages/flex/flex","iconPath": "static/Flex布局.png","selectedIconPath": "static/Flex布局 (1).png"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}