侯体宗的博客
  • 首页
  • Hyperf2.1版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 2年前   178

 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底部安全区域(底部小黑条)适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


  • 上一条:
    小程序canvas中文字设置居中锚点
    下一条:
    微信小程序里使用SVG矢量图标方法详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 百度小程序详情页中使用wxapp-rich-text组件解析html标签并展示出来(0个评论)
    • 百度小程序列表中点击跳转详情页流程步骤(0个评论)
    • 百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能(0个评论)
    • 近期文章
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
    • Laravel 9.12版本发布(0个评论)
    • go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
    • go语言之如何加入字符串?(0个评论)
    • go语言之以x因子的倍数重复一个字符(0个评论)
    • 近期评论
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 激光豆芽 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客