详细介绍uniapp小程序自定义底部tabbar样式的方法

uniapp自带的tabbar组件可以方便地实现底部导航栏的功能，原生tabBar是相对固定的配置方式，但是默认的样式可能无法满足我们的需求，所以我们需要自定义设置tabbar样式。下面我会详细介绍uniapp自定义tabbar样式的方法。

一、pages.json代码

pages.json这里只配置页面路径就可以。

"tabBar": {
		
		"color": "#7A7E83",
		"selectedColor": "#086d5b",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			}
		]
		
	},

二、创建一个tabBar.vue组件

在uniapp项目的components目录下创建一个名为tabbar的组件，该组件包含了tabbar的整体布局和动态切换效果。

tabbar.vue组件HTML部分代码如下：