微信小程序 iPhoneX底部安全区域(底部小黑条)适配(一分钟解决)

 更新时间:2019年10月18日 09:17:45   作者:乐呵乐呵de啦   我要评论
iPhone X 对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处理,大概思路是,得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域(底部小黑条)适配问题,需要的朋友可以参考下

 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()” 特性。

可参照官方文档:https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

总结

以上所述是小编给大家介绍的微信小程序 iPhoneX底部安全区域(底部小黑条)适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • xmlHttp ie6下不跨域还提示没有权限,ie8下不会有这错误

    xmlHttp ie6下不跨域还提示没有权限,ie8下不会有这错误

    昨天晚上叫我好弄啊,最后发现原因是我url太长了,最后发现URL在2070B左右就不行了
    2009-04-04
  • Git使用小技巧之回滚与撤销详解

    Git使用小技巧之回滚与撤销详解

    这篇文章主要给大家介绍了关于Git使用小技巧之回滚与撤销的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Git具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • Git忽略提交的3种方法及Git忽略规则

    Git忽略提交的3种方法及Git忽略规则

    在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则今天为大家简单介绍下Git的忽略及规则
    2018-10-10
  • IE 浏览器安全级别详情及区别小结

    IE 浏览器安全级别详情及区别小结

    排查问题时,定位到可能和当前浏览器的安全级别设置有关,顺便整理了下Windows 7下IE9安全级别的详情内容,及各安全级别下的默认设置差异
    2016-01-01
  • 算法系列15天速成 第九天 队列

    算法系列15天速成 第九天 队列

    可能大家都知道,线性表的变种非常非常多,比如今天讲的“队列”,灰常有意思啊
    2013-11-11
  • 彻底理解cookie,session,token的使用及原理

    彻底理解cookie,session,token的使用及原理

    这篇文章主要介绍了彻底理解cookie,session,token的使用及原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • scala中停止循环的三种方式(推荐)

    scala中停止循环的三种方式(推荐)

    这篇文章主要介绍了scala中停止循环的三种方式,文中给大家提到了循环语句的流程图,感兴趣的朋友可以参考下
    2019-12-12
  • 千万要避免的五种程序注释方式小结

    千万要避免的五种程序注释方式小结

    你是否有过复查程序时发现有些注释毫无用处?程序注释是为了提高代码的可读性,为了让原作者以外的其他开发人员更容易理解这段程序。
    2011-10-10
  • 分享几个新增备案不关站的代码

    分享几个新增备案不关站的代码

    这篇文章主要介绍了分享几个新增备案不关站的代码,需要的朋友可以参考下
    2015-01-01
  • 浏览器缓存知识小结及应用分析

    浏览器缓存知识小结及应用分析

    了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助
    2017-03-03

最新评论