uni-app uView自定义底部导航栏

因项目需要自定义底部导航栏，我把它写在了组件里，基于uView2框架写的（vue2）；

一、代码

 在components下创建tabbar.vue文件，代码如下：

 app.vue（有没有大佬知道为什么这个样式加载app.vue里才生效）

/* 导航样式 */
.u-tabbar__content {
    box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(180, 203, 199, 0.4);
}  
.u-page__item__slot-icon {
    width: 40rpx;
    height: 40rpx;
}

二、配置

 pages.json配置

"tabBar": {
		"custom": true,
		"list": [
			{
				"pagePath": "pages/salesRecords/index"
			}, 
			{
				"pagePath": "pages/mine/index"
			}
		]
	},

三、使用

页面使用：（mine.vue）

注：current是底部导航栏的下标，你在tabbar页面的list中写的页面下标从0开始依次递增（如：我这个mine.vue的下标是1，在页面里引用组件时要加上:current="1"）

有不懂的可以留言...