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底部安全区域(底部小黑条)适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对尊托云数网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
核心代码: % ' OPTION EXPLICIT const BASE_64_MAP_INIT = "ABCDEFGHIJKLMNOPQR...
详解JSP 中Spring工作原理及其作用 1.springmvc请所有的请求都提交给DispatcherS...
最近做的系统里,使用layui当作前端的框架,就是用了layui自带的layer弹出层,效...
现在很多web项目都能用到登录界面,本文介绍一下JSP制作简单登录界面,分享给大...
一,如下图 二,构建好框架,将不必要的包删掉 三,添加路由 app.UseEndpoints(e...
不了解分布式ID生成器的同学,先复习一下之前的 《9种分布式ID生成方式》 Tinyid...
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图。 实现方式...
CPU的cache工作原理 博主微信flm13724054952不懂的有疑惑的也可以加微信咨询欢迎...
概述 本文提供Redis持久化技术说明, 建议所有Redis用户阅读. 如果您想更深入了解...
3月15日消息 外媒 Techdows 报道,微软正努力在其 Edge 浏览器中打造更好地浮现...