uni自定义tabbar

在项目中会有2个tabbar 

一个在主页，一个在副页，但是uni的tabbar只能有一个，所以就基于colorUI的代码自定义一个tabbar

首先解决tabbar的样式冲突问题

上面的是 colorUI的原生样式

引入后出现了 样式冲突。

uni有一个样式是

uni-view {
    line-height: 1.8;
}

只需要重新定义 行高，改为1 就可以了

然后是 页面

页面将制作的页面分开写成 自定义模板 （点击查看自定义模板怎么制作）

但是要将页面写到

中

给page加个样式

.page {
	height: 100vh;
}

最后在尾部加一个 支持页面 不被底部tabbar挡住的view

最后在 main中挂载 所写的页面

import homePage from './pages/myShop/shopIndex/homePage.vue'
Vue.component('homePage',homePage)

注意：不能再pages.json中注册页面

然后可以直接在页面中引入使用了

也可以自己在colorUI中看源码