微信小程序虽然开放了自定义的tabbar 因为他用的是fixed定位布局 导致每个tabbar页都要去动态计算padding-bottom 或者bottom值,之前尝试过
wx.getSystemInfo({
success: function(res) {
console.log(res)
if (res.model.search('iPhone X') != -1) {
that.globalData.isIphoneX = true
}
},
})
在app.js中判断是不是iphone X ok这个时候是完美适配的 但是有一天测试同学拿着iphone 11 pro max找我 说页面的padding-bottom值会盖住,在我的排查中发现res.model.search('iPhone X') != -1 这句代码拿到的结果为-1 我之前是这么处理的 我判断机型为iphonex的时候 tabbar 页面的padding-bottom为100rpx+64rpx 但是iphone 11pro 系列手机在这个判断中无效 经过排查并反复改 终于拿到了完美适配的方案!!!!我们只需要在外层的view padding-bottom: calc(100rpx + env(safe-area-inset-bottom))就好了 有需要的同学点个关注吧!!! 对了 再次说明下 custom-tab-bar.wxss 中.tar-bar里的height我自己改成了100rpx 微信官方的是50px
迷茫了一下午 看到这篇文章 正好解答了我遇到的tarbar兼容bug 厉害!
大佬问一下支持公众号吗这样
safe-area-inset-bottom
这个收下
感谢大佬,解决了我的困扰
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))
感谢感谢,找了一下午终于找到了
mark
只有真机上有效吗,模拟器上没有生效吧?
这个属性:
safe-area-inset-bottom
微信、支付宝、百度、QQ支持、头条不支持。