uniapp 实现页面全局配置 / 底部导航栏tabbar

uni-app官网

页面全局配置

pages.json里面的globalStyle配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：
	     //https://uniapp.dcloud.io/collocation/pages
		{//这个是配置新建文件
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"//对应单个文件的标题
			}
		}
	],
	"globalStyle": {//全局配置 (适用于所有页面)
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"backgroundTextStyle":"dark",
		"enablePullDownRefresh":"true"
	}
}

如何查看官网信息

点击uni-app官网进入----搜索globalStyle----进入配置详表
或者
点击uni-app官网进入----全局文件----页面路由----globalStyle---点击跳转配置详表

底部导航栏tabbar

pages.json文件下配置tabBar

{
      "pages":[
           配置的tabbar记得在pages里面也引入
           //{
			//"path":"pages/index/index",
			//"style": {
			//	"navigationBarTitleText": "发现"
			//}
		//},
      ],
      "tabBar": {
			"color":"#8a8a8a",
			"selectedColor":"#00aa00",
			"borderStyle":"black",
			"backgroundColor":"#ffffff",
			"list": [
				{
					"pagePath":"pages/index/index",
					"text":"首页",
					"iconPath":"static/home_normal.png",
					"selectedIconPath":"static/home.png"
				},
				{
					"pagePath":"pages/search/search",
					"text":"发现",
					"iconPath":"static/search_normal.png",
					"selectedIconPath":"static/search.png"
				},
				{
					"pagePath":"pages/me/me",
					"text":"我的",
					"iconPath":"static/me_normal.png",
					"selectedIconPath":"static/me.png"
				}
			]	
		 },
      "globalStyle": {
		...
	}
}

tabbar引入的图片如果引入本地图片的话
记得在assets文件夹放入图片
图片名称不可有中文 如上所示PS 图片必须是asset的父级

如何查看官网信息

点击uni-app官网进入----搜索tabBar----进入配置详表
或者
点击uni-app官网进入----全局文件----页面路由---- tabBar---点击跳转配置详表

tabBar参数说明

pagePath：页面路径
text：底部导航文字
iconPath：没选中前的图标路径
selectedIconPath：选中后的图标路径

参考地址