一，引入uView-UI组件，安装uView-UI框架

具体安装流程与配置详见 www.uviewui.com/components/…

二，使用uView-ui组件实现自定义tabBar，我这里以下图为例

通过uniapp结合uView-UI组件实现上图的tabBar效果；

嘿嘿，前面已经成功的引入了uView-UI组件了，也了解我们的目标了，接下来就是正式开始动手了

三,准备完毕，即将动手

（一）创建一个tabBar组件

我这里不小心多建了一个文件夹，后面懒得删了，在建tabBar组件页面的时候一个文件夹就够了

（二）在tabBar组件中写去一下的代码（可直接复制，再替换成自己想要的对应tabBar样子）

<template>
	<view>
		<u-tabbar v-model="current" :list="list" :mid-button="true" @change="ChangBar" ></u-tabbar>
	</view>
</template>

tabBar中data里面的代码如下

list: [{
	"pagePath": "pages/home/home",
	iconPath: "home",
	selectedIconPath: "home-fill",
	text: '首页',
	// count: 2,
	// isDot: true,
	customIcon: false,
	},
	{
	"pagePath": "pages/Projection/Projection",
	iconPath: "photo",
	selectedIconPath: "photo-fill",
	text: '放映厅',
	customIcon: false,
	},
	{
	"pagePath": "pages/release/release",
	iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
	selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
	text: '发布',
	midButton: true,
	customIcon: false,
	},
	{
	"pagePath": "pages/live/live",
	iconPath: "play-right",
	selectedIconPath: "play-right-fill",
	text: '直播',
	customIcon: false,
	},
	{
	"pagePath": "pages/user/user",
	"iconPath": "account",
	"selectedIconPath": "account-fill",
	"text": '我的',
	// "count": 23,
	"isDot": false,
	"customIcon": false,
	},
	],
	current: 0

点击对应的tabBar进行页面切换

methods: {
	ChangBar(e) {
                  uni.switchTab({
			url: '/' + this.list[e].pagePath
				})
                    }
        }

我这里是利用了uView—UI组件里面tabBar的封装的方法，通过change事件获取每一项的索引，在通过uni.switchTab进行tabBar的跳转（这里也可以用switch case 去一一判断，再一一跳转，我觉得比较麻烦，因此不推荐）

注：tabBar的跳转只能用switchTab进行页面跳转

（三）将我们刚刚写好的tabBar组件挂载到全局中（即入口函数main.js里面）

main.js中挂载代码如下

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

main.js整体代码如下

（四）接下来就是创建页面了（tabBar里面有多少个就创建多少个页面）

（五）在每个页面中使用tabBar组件（我这里以一个页面为例，其余页面做法均相同）

此刻，看到效果已经是跟我们要的tabBar一样了，是不是很激动的点一下看看能不能跳转呢（点完发现，咦，怎么跳转不了，而且tabBar的按钮颜色也不变了）

其实到这里，我们只完成了一个雏形而已（也就是说我们只完成了表面而已,还没进行真正的tabBar配置呢）

（六）配置tabBar（在pages.json文件下配置）

我这里就不说配置原理了，直接上代码

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "white",
		"backgroundColor": "#f4f5f7",
		"custom": true,
		"list": [{
			"pagePath": "pages/home/home",
				// "iconPath": "home",
				// "selectedIconPath": "home-fill",
				"text": "首页",
				"count": 2,
				"isDot": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/Projection/Projection",
				// "iconPath": "photo",
				// "selectedIconPath": "photo-fill",
				"text": "放映厅",
				"customIcon": false
			},
			{
				"pagePath": "pages/release/release",
				
				// "iconPath": "https://cdn.uviewui.com/uview/common/min_button.png",
				// "selectedIconPath": "https://cdn.uviewui.com/uview/common/min_button_select.png",
				"text": "发布",
				"midButton": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/live/live",
				// "iconPath": "play-right",
				// "selectedIconPath": "play-right-fill",
				"text": "直播",
				"customIcon": false
			},
			{
				"pagePath": "pages/user/user",
				// "iconPath": "account",
				// "selectedIconPath": "account-fill",
				"text": "我的",
				"count": 23,
				"isDot": false,
				"customIcon": false
			}
		],
		"current": 0
	}

配置完tabBar之后就大功告成了，此刻的tabBar到这里已经能正常的跳转到我们想要的页面了（嘻嘻，到这里，是不是心理小有成就感了呢，又学会了一个功能的制作）

《注》关于uniapp中一些跳转的方法，避免混乱，可参考uniapp官网 uniapp.dcloud.io/api/router?… 中这块区域

uniapp结合uView-UI实现自定义tabBar