uniapp修改tabbar背景图片

2024-07-16 18:30| 来源: 网络整理| 查看: 265

背景

最近遇到一个项目，UI给的设计图上tabbar是带有背景图片的，由于习惯使用uniapp自带的tabbar，首先查阅了pages.json中tabBar的配置，没有设置背景图片的参数。

第一个解决办法

首先想到的第一个办法是把tabbar背景设为全透明的，再通过CSS定位一个元素和tabbar重合，就可以出现背景图的效果

"tabBar":{"backgroundColor":"#ffffff00"}

配置好后，拿H5一测，完美解决但是拿真机测试时，出现了问题，应该是背景颜色不能设置全透明的原因，出现tabbar背景颜色为黄色的状况

第二个解决办法

出现了上面的问题，开始找第二个解决办法，在官方的api文档中有一个方法uni.setTabBarStyle可以设置背景图片

uni.setTabBarStyle({ backgroundImage: '/static/images/bgs.png', backgroundRepeat: 'repeat' })

再拿手机测试，完美解决，但是再重新加载一下H5的，又不行了

最终方法

既然两个方法都会在各端出问题，那么把两个方法结合起来就可以解决了

"tabBar":{"backgroundColor":"#ffffff00"}

条件编译一下，H5时使用定位的方法

条件编译一下，除了H5均使用自带的方法，只需要第一个tabbar页面运行即可

onLoad() { // #ifndef H5 uni.setTabBarStyle({ backgroundImage: '/static/images/bgs.png', backgroundRepeat: 'repeat' }) // #endif },

【本文地址】

今日新闻