uni-app 底部tabbar设置 && 底部tabbar样式

自己不努力,没人会帮你

小程序很常见的底部tabbar按钮该如何设置呢？

1. 创建页面

目录如下：

• pages
  - index / index.vue
  - mine / mine.vue

2. 配置tabbar

需要配置的文件：pages.json
配置代码块：

	"pages" : [ 
		// 这里是路由配置
	],
	"tabBar": { // 这里就是配置tabbar的地方
		"color": "#8a8a8a", // 导航栏字体颜色
		"selectedColor": "#d4237a", // 选中后字体的颜色
		"borderStyle": "black", // 底部的border颜色，只能是“black”或者“white”
		"backgroundColor": "#ffffff", // 底部背景颜色
		"list": [{
				"pagePath": "pages/index/index", // 页面路径
				"text": "首页", // 底部导航文字,
				"iconPath": "static/logo.png", // 没选中前的图标路径
				"selectedIconPath": "static/logo.png" // 选中后的图标路径
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			}
		]
	}

效果图：

3. tabbar样式修改

修改文件：App.vue全局样式添加

	.uni-tabbar {
		// tab 样式
		// 背景色
		background-color: rgba(57, 181, 74, 0.1) !important;

		// tabBar 样式
		// 上边框
		.uni-tabbar-border {
			background-color: #e54d42 !important; // tabBar 上边框的颜色
		}

		.uni-tabbar__item {

			// tabBar 单项样式
			height: 100rpx !important;

			&:not(:last-child) {
				border-right: 4rpx solid #eee;
			}

			.uni-tabbar__icon {
				// tabBar 图标样式
				width: 40rpx !important;
				height: 40rpx !important;
			}

			.uni-tabbar__label {
				// tabBar 文字样式
				// color:yellow !important
			}
		}
	}