uniapp配置微信小程序配置底部tabbar菜单

uniapp yekong

使用uniapp开发小程序时,需要实现一个底部菜单按钮,我们需要在pages.json这个文件里进行配置。

uniapp配置微信小程序配置底部tabbar菜单

默认的pages.json

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

我需要在uniapp配置四个按钮首页 预约 订单 我的

完成后的配置

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	{
		"tabBar": {
			"color": "#767676",
			"selectedColor": "#1A1A1A",
			"backgroundColor": "#FFFFFF",
			"borderStyle": "black",
			"list": [{
					"pagePath": "pages/index/index",
					"text": "首页",
					"iconPath": "static/tabs/home.png",
					"selectedIconPath": "static/tabs/home-active.png"
				},
				{
					"pagePath": "pages/appointment/appointment",
					"text": "预约",
					"iconPath": "static/tabs/appointment.png",
					"selectedIconPath": "static/tabs/appointment-active.png"
				},
				{
					"pagePath": "pages/order/order",
					"text": "订单",
					"iconPath": "static/tabs/order.png",
					"selectedIconPath": "static/tabs/order-active.png"
				},
				{
					"pagePath": "pages/mine/mine",
					"text": "我的",
					"iconPath": "static/tabs/mine.png",
					"selectedIconPath": "static/tabs/mine-active.png"
				}
			]
		}
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}
喜欢