uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!

uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!_第1张图片

pages.json

uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!_第2张图片

 上面可以看到tabbar我使用的原生的,但是值配置了pagepath,并且page里三个首页都可以自定义顶部导航栏,当然如果删掉custom那一行代码,就切换成原生顶部导航栏了。

下面拿一个首页作为代码演示:(顶部自定义导航栏组件和底部导航栏组件会放在最后)

下图组件没有引入,是使用了easyCom,官网详解





需要在App.vue中onLaunch和onShow方法后面加上uni.hideTabbar({})隐藏原生tabbar(因为兼容性问题两个地方必须都加上)

uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!_第3张图片

 特别需要留意的"navigationStyle": "default" 只能控制顶部导航栏是否自定义,而底部导航栏是由下图选项控制,如果要隐藏可以通过   uni.hideTabBar()  隐藏掉

uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!_第4张图片

 

 修改大小
根据需要修改了u-tabbar和u-tabbar-item宽度高度,这些基本属性在uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue和uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue中都有相应的注释,写得很清楚,自行修改就好

如果还需要添加底部导航栏按下出现阴影的css效果:参考

你可能感兴趣的:(uni-app)