uniapp修改tabbar背景图片

背景

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

第一个解决办法

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

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

<view class="" style="position: fiexd;width: 100%;height: 100rpx;background: url(../../static/images/bgs.png);left: 0;bottom: 0;"></view>

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

第二个解决办法

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

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

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

最终方法

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

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

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

<!-- #ifdef H5 -->
<view class="" style="position: fiexd;width: 100%;height: 100rpx;background: url(../../static/images/bgs.png);left: 0;bottom: 0;"></view>
<!-- #endif -->

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

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