评论

微信小程序自定义tarbra的坑,动态适配iphoneX iphone11 带安全区域的手机

微信小程序自定义tarbra的坑,动态计算padding-bottom适配iphoneX iphone11 带安全区域的手机

微信小程序虽然开放了自定义的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

最后一次编辑于  2020-03-19  
点赞 10
收藏
评论

9 个评论

  • Neverland
    Neverland
    2020-03-18

    迷茫了一下午 看到这篇文章 正好解答了我遇到的tarbar兼容bug 厉害!

    2020-03-18
    赞同 2
    回复 1
    • xy
      xy
      2020-03-18
      能够帮助到你,就是对我最大的支持,万分感谢
      2020-03-18
      3
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-03-18

    safe-area-inset-bottom

    这个收下

    2020-03-18
    赞同 1
    回复 1
    • xy
      xy
      2020-03-19
      好的
      2020-03-19
      2
      回复
  • 叁
    04-13

    感谢大佬,解决了我的困扰

    04-13
    赞同
    回复
  • 条纹张
    条纹张
    2020-08-14

    @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))

    2020-08-14
    赞同
    回复
  • 小先生
    小先生
    2020-05-18

    感谢感谢,找了一下午终于找到了

    2020-05-18
    赞同
    回复 1
    • xy
      xy
      2020-05-18
      不客气
      2020-05-18
      2
      回复
  • 衬衫
    衬衫
    2020-04-14

    mark

    2020-04-14
    赞同
    回复
  • Daniel
    Daniel
    2020-04-13

    只有真机上有效吗,模拟器上没有生效吧?

    2020-04-13
    赞同
    回复
  • 小肥羊
    小肥羊
    2020-03-19
    没用过学习了
    2020-03-19
    赞同
    回复
  • 贩卖焦虑
    贩卖焦虑
    2020-03-18

    这个属性:

    safe-area-inset-bottom

    微信、支付宝、百度、QQ支持、头条不支持。

    2020-03-18
    赞同
    回复 7
    • 贩卖焦虑
      贩卖焦虑
      2020-03-18
      跟工具大佬说了,工具预计会支持这个属性:
      2020-03-18
      回复
    • 贩卖焦虑
      贩卖焦虑
      2020-03-18
      然后 标题的单词改下 tabbar
      2020-03-18
      回复
    • xy
      xy
      2020-03-19
      safe-area-inset-bottom微信小程序支持的呀
      2020-03-19
      2
      回复
    • xy
      xy
      2020-03-19回复贩卖焦虑
      多谢指正
      2020-03-19
      2
      回复
    • 贩卖焦虑
      贩卖焦虑
      2020-03-19回复xy
      2020-03-19
      回复
    查看更多(2)
登录 后发表内容