uniapp-tabBar 配置

tabBar 配置

1、创建tabBar页面

项目中的 tabBar 页面设计了有两个分别是主页和用户中心

• 在 pages 下面创建 : tabBar 页面需要放到主包中
• 在 pages.json 当中配置页面路由
  

//pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [{
			"path": "pages/sys/login/index",
			"style": {
				"navigationBarTitleText": "登录",
				"navigationStyle": "custom" // 隐藏系统导航栏
			}
		},

		{
			"path": "pages/sys/user/index",
			"style": {
				"navigationBarTitleText": "个人中心",
				// "navigationBarBackgroundColor": "#5582F3",
				// "navigationBarBackgroundColor": "#F5F5F5",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path": "pages/sys/home/index",
			"style": {
				"navigationBarTitleText": "工作台-首页",
				"enablePullDownRefresh": true,
				"app-plus": {
					"pullToRefresh": {
						"support": true,
						"color": "#2979ff", //小圈圈的颜色
						"style": "circle" //小圈圈的样式
					}
				}
			}
		}
	],
	"subPackages": [
		// 设备分包
		// 用户分包			
	],
	....
}

2. 配置tabBar

在 pages.json 文件中在 pages 平级新增 tabBar 的配置：

	"tabBar": {
		"color": "#333333",
		"selectedColor": "#4094ff",
		"backgroundColor": "#ffffff",// 底部 tabBar 背景色
		"borderStyle": "white",
		"list": [{
				"pagePath": "pages/sys/home/index",
				"text":"首页",
				"iconPath": "static/common/tabbar/home.png",
				"selectedIconPath": "static/common/tabbar/home-active.png"
			},
			{
				"pagePath": "pages/sys/user/index",
				"text":"个人中心",
				"iconPath": "static/common/tabbar/me.png",
				"selectedIconPath": "static/common/tabbar/me-active.png"
			}
		]
	}

这里的首页和个人中心的图片,是放在 static/common/tabbar 目录中的图片(可以在阿里矢量图标库 下载),不是字体图标

tabBar其他的属性
“color”:“#FFFFFF”, 默认字体
“selectedColor”:“#ff0001”, 选中字体
“backgroundColor”:“blue”, 背景颜色

uniapp底部tabBar图标使用字体图标

uni-app的tabBar为什么不让自定义文字大小