uni小程序 uview 1.8.8自定义tabBar

官网;安装 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)

先创建一个components文件，里面放置TabBar-TabBar.vue

在mian.js引入

// 挂载tabBar
import tabBar from "components/Tabbar/Tabbar.vue"//引入我们自己定义的tabBar组件
Vue.component('tab-bar', tabBar)//使用tabBar组件

在需要的页面使用组件

在pages里面配置tabBar

 

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "white",
		"backgroundColor": "#f4f5f7",
		// "custom": true,
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/icon/首页.png",
				// "selectedIconPath": "static/icon/首页 1.png",
				"text": "首页",
				"count": 2,
				"isDot": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/Scancode/Scancode",
				"text": "扫码",
				"midButton": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"isDot": false,
				"customIcon": false
			}
		],
		"current": 0
	},