微信小程序 iPhoneX底部安全区域(底部小黑条)适配(一分钟解决)
程序员文章站
2022-03-03 21:18:55
iphone x 对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处理,大概思路是,得到手机型号、分别判断样式,即可,如下:
安全区域指...
iphone x 对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处理,大概思路是,得到手机型号、分别判断样式,即可,如下:
安全区域指的是内容可见区域(图中蓝色部分):
处理前后效果图:
步骤:
1.在app.js的onlaunch函数内调用wx.getsysteminfo,获得手机型号(res.model),并存储为全局变量:
onlaunch: function() { let _self = this; wx.getsysteminfo({ success: res => { let modelmes = res.model; if (modelmes.search('iphone x') != -1) { _self.globaldata.isiphonex = true } wx.setstoragesync('modelmes', modelmes) } }) }
2.在所需页面的js文件的onload函数内从全局变量里面拿出来第一步存储的手机型号值,这里设置为isiphonex:
onload: function(options) let modelmes = wx.getstoragesync('modelmes'); let isiphonex = app.globaldata.isiphonex; this.setdata({ isiphonex: isiphonex }) }
3.在所需页面的wxml里面根据手机型号是否为iphone x 来运用三元运算符判断底部的位置就可以啦:
<view class="footer" style="margin-bottom: {{isiphonex ? '68rpx' : '0rpx'}};"></view>
已解决。
这是最简单的一种方法,有其他方法等待小伙伴们探索实践,比如可以用ios新增的 “viewport-fit
” 特性或者是 “env()
和 constant()”
特性。
可参照官方文档:
总结
以上所述是小编给大家介绍的微信小程序 iphonex底部安全区域(底部小黑条)适配,希望对大家有所帮助