uniapp|uniapp 自定义底部导航栏 css|vue.js|uni-app|vue

在做项目时，经常遇到在现有的框架中无法实现UI图上的样式，比如说将底部导航栏的字体在选中状态下变为渐变色，在浏览器上可以直接修改css样式，但是运行到真机时才发现根本不生效，查阅官方文档才发现app端的根本不支持这些属性更改
下面是我在项目中做底部导航栏的过程
【uniapp|uniapp 自定义底部导航栏】1.首先是用的官方的底部导航栏，具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949
在用这个底部导航栏时，就无法更改字体颜色为渐变色（app端）

文章图片

2. 要实现UI设计图的效果，就要自定义底部导航栏了，这里代码可以直接复制使用；

.uni-tabbar { position: fixed; bottom: 0; z-index: 999; width: 100%; height: 6%; display: flex; justify-content: space-around; padding: 7rpx 0; box-sizing: border-box; background-color: #fff; box-shadow: 0px 10px 20px 0px rgba(75, 51, 100, 0.05); .uni-tabbar__item { display: flex; flex-direction: column; .uni-tabbar__bd { // tabBar单项 .uni-tabbar__icon { // tabBar图标 width: 54rpx; height: 83rpx; img { width: 100%; height: 100%; } } }.uni-tabbar__label { // tabBar文字 font-size: 22rpx; font-family: $PF-SC-Rfamily; font-weight: 400; color: #D8DCE7; text-align: center; &.active { background-image: linear-gradient(to right top, #1CFDF1, #B330FF); font-size: 22rpx; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; box-decoration-break: clone; -webkit-box-decoration-break: clone; -moz-box-decoration-break: clone; color: transparent; position: relative; } } }// .uni-tabbar__icon { //height: 42upx; //line-height: 42upx; //text-align: center; // }.icon { display: inline-block; }// .uni-tabbar__label { //line-height: 24upx; //font-size: 24upx; //color: #999; //&.active { //color: #1ca6ec; //} // } }

在main.js里面全局注入

文章图片

再在你需要的页面引入

文章图片
这样可以得到一个这样的导航栏了

文章图片

这样写是实现了渐变色导航栏，但是有一个bug，就是在切换页面时，底部导航栏会重新加载，看起来没有那么丝滑，因为这是的写法是，匹配每个页面组件传过来的值，符合条件就进行跳转，相当于跳转到新的页面。
3.为了改变这个显示上的bug，我又换了一种写法，模仿选项卡的样式

.content { width: 100%; height: 94%; } .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; width: 100%; height: 6%; background-color: #ffffff; .tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56rpx; height: 85%; .item-img { width: 54rpx; height: 54rpx; }.item-name { text-align: center; font-size: 22rpx; font-weight: 400; font-family: $PF-SC-Rfamily; color: #D8DCE7; }.tabbarActive { background-image: linear-gradient(to right top, #1CFDF1, #B330FF); font-size: 22rpx; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; box-decoration-break: clone; -webkit-box-decoration-break: clone; -moz-box-decoration-break: clone; color: transparent; position: relative; animation: mymove 2s infinite; }@keyframes mymove { 0% { transform: scale(1); /*开始为原始大小*/ }25% { transform: scale(1.2); /*放大1.1倍*/ }50% { transform: scale(1); }75% { transform: scale(1.2); }} } }

这样就能完美实现我想要的效果了，并且还给底部选项卡添加了动画，以上代码都可以直接复制使用，亲测有效（app端和h5端）；
但是这样写之后可以子组件的无法请求数据，是因为这样写改变了子组件的生命周期，将onLoad改成vue中的mounted就行了；
还有一个问题是子组件的跳转可能会有问题，将路径改为绝对路径就行，如果还是不行就在绝对路径前面加上'/' 就没有问题了；
以上就是我遇到的坑，如有问题，欢迎留言！！