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": {}
}