uniapp tabBar 路由 pages


输出效果

tabBar页面的配置

  1. 配置pages,相当于vue中的路由,数组的第一项是默认启动页
  2. 配置tabBar

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/my/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tab/shouyea.png",
				"selectedIconPath": "static/tab/dingdanb.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/my/index",
				"iconPath": "static/tab/wodea.png",
				"selectedIconPath": "static/tab/wodeb.png",
				"text": "我的"
			}
		]
	}
}