微信小程序自定义tabBar机型适配,不用写脚本
微信小程序可以通过在app.json文件中定义官方的tabBar,但是实际项目中往往会遇到一些业务需求官方的tabBar无法做到。比如说底部的tabBar个数是根据不同角色来显示,这个时候我们需要自定义tabBar。在自定义tabBar的时候了会遇到不同机型底部适配问题(比如iphoneX,Iphone 11Pro ,一些齐刘海机型底部安全区域问题),一开始我想到的是用脚本判断设备机型,通过是不是齐刘海来给底部tabBar预留64rpx的距离。
wx.getSystemInfo({ success: res => { let { screenWidth, screenHeight } = res console.log("设备信息:",res) // iphoneX 、11、Xr、 Max等设备分辨率 let _screen = [ {w: 375, h: 812 }, {w: 414, h: 896 } ] that.globalData.isIphoneX = _screen.some(item => item.w === screenWidth && item.h === screenHeight) console.log("isIphoneX设备:", that.globalData.isIphoneX ) } })
刚好最近一个小程序项目上线了,恰巧又碰到iphone 12新手机上市,客户那边反应iphone 12 Pro上底部tabBar显示有遮挡。不用想我就知道肯定是新产品iphone12,iphone 12 pro的设备分辨率不在对比的数据列表内,所以我就在想如果后面又有新的机型出现怎么办?所以上面的代码通用性不是很强。就在网上百度查看到可以通过css直接设置安全区域底部来解决,只需在包裹tabBar的元素(class:tabbar_wrapper)上加一行代码解决即可。
.tabbar_wrapper{ padding-bottom:calc(100rpx + env(safe-area-inset-bottom)) }
env(safe-area-inset-bottom) 参考链接:https://blog.csdn.net/sd19871122/article/details/80989704