移动端（uniapp）底部导航栏切换

背景

        初项目构想时，以两个不同的角色分不同的项目提供进入平台的开发目标来实现，在实际开发过程中被告知业务方只提供一个入口，所以只能把现有的两个项目代码进行合并，前提底部导航栏按不同端进行变更，一个中间按钮凸起，一个没有，为了完成这个功能进行了探索。

构思

        实现思路首先创建一个基础底部配置文件和一个tabbar页面，用来控制业务端的切换变更的。再者按实际所需创建多个底部切换页面，说到这里那我们就可以利用uniapp提供的组件easycom模式来解决子组件多引用的问题。设想就是一个页面共用多个端使用v-if或者v-show的形式进行切换，最后在外层再做一层父类统一入口控制整个tabbar的切换。

实现

第一步，在根目录components（没有就新建一个components目录）下新建一个文件夹（ctab），然后分别新建一个ctab.vue组件和一个ctab-config.js文件。这样组件可以在其他页面上引用，js文件主要用于做配置。

第二步，新建底部页面组件，组件最多限制5个tab组件，然后需要通过easycom占位来实现，所以你需要几个tab组件就在components目录下建几个组件命名为ctab{n}。如下所示：

第三步，这里就直接贴ctab.vue的实现代码，想尝试就直接拷贝试一下，举个栗子。

第四步，这里就是配置文件ctab-config.js代码，按需进行调整，举个栗子。

1）通过修改配置文件中的midButton中的show属性来开启是否中间按钮凸起。
2）通过配置或者动态修改tabs中tab obj中的show属性来动态形式和隐藏某个tab。

2）其他字段配置按需进行配置。

var tabbar = {
	/*开启midButton模式时取前两个或者前四个显示，其他忽略*/
	midButton: {
		show: true,//是否是中间凸起模式
		width: '153rpx',//不填默认150rpx 中间按钮大小
		iconwidth: '67rpx',//不填默认150rpx 中间图标大小
		iconheight: '60rpx',
		offset: '40rpx',//不填默认50rpx
		background: '#F7D456',//中间按钮背景颜色
		text: '拍一拍',
		textoffset: '50rpx',//不填默认50rpx
		showtext: false,
		icon: '../../static/tabbar/camera.png'
	},
	color: '#333333',//未选中颜色
	selectcolor: '#F7D456',//选中颜色
	/*tabs最多5个,超过5个超过的部分会被忽略,show属性用来控制tab显示隐藏，midButton开启时失效,iconfont优先，没有就使用icon*/
	tabs: [{
		icon: '../../static/tabbar/main_tab_home_normal.png',
		iconSelect: '../../static/tabbar/main_tab_home_select.png',
		text: '首页',
		iconfont: '',
		show: true,
		mark: 0//角标数量，小于等于0不显示
	}, {
		icon: '../../static/tabbar/main_tab_task_normal.png',
		iconSelect: '../../static/tabbar/main_tab_task_select.png',
		text: '任务',
		iconfont: '',
		show: true,
		mark: 100
	}, {
		icon: '../../static/tabbar/main_tab_my_normal.png',
		iconSelect: '../../static/tabbar/main_tab_my_select.png',
		text: '我的',
		iconfont: 'icon-wode',//注意配置字体图标会优先使用字体图标，这里是示例
		show: true,
		mark: 9
	}]
}

module.exports = {
	tabbar
}

第五步，tab切换1~n（ctab{1~n}）的页面就是自己业务功能页面了，举个栗子。

第六步，最后就是定义统一入口的页面，用于调用底部tabbar导航栏了，举个栗子。

最后 

        写到这里就宣告结束了。在此祝大家身体健康，越码越浓后会有期~~