小程序底部兼容iphoneX

解决iphoneX底部会有一条黑色线挡着小程序底部文字
1 . appjs中加入获取用户信息

    // 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})// 判断设备是否为全面屏this.checkIphoneX()

2.设置全局globalData对象

  globalData: {isIphoneX:false,userInfo: null},

3 . 判断是否为全面屏的方法

  checkIphoneX() {let that = this;let info = wx.getSystemInfoSync();if (/iPhone X/i.test(info.model)) {that.globalData.isIphoneX = true} else {that.globalData.isIphoneX =false;}},

xxx.js页面中
1 . getapp()

const app = getApp();

2.在data中设置一个变量接收app.js中globalData传出的值，我这里用的是aaa,判断aaa的值就能知道是否为iphoneX了

 aaa: app.globalData.isIphoneX, //判断机型

小程序底部兼容iphoneX相关推荐

小程序底部导航iphoneX判断
app.js App({ globalData: { isIphoneX: false, }, /** * 当小程序启动,或从后台进入前台显示,会触发 onShow */ onShow: functi ...
微信小程序浮动按钮_操作按钮悬浮固定在微信小程序底部的实现代码
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助. 常见的有加入购物车按钮.结算按钮.收货列表添加地址按钮. 以收货地 ...
按钮悬浮固定在微信小程序底部
http://mydown.yesky.com/news/87296687.html 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希 ...
用mpx框架自定义小程序底部tabbar
小程序[mpx] 用mpx框架自定义小程序底部tabbar 参考小程序官方文档:自定义 tabBar. 1.项目根目录下app.mpx** 1).添加"custom":" ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
iphone微信小程序底部预留bar安全距离css
项目场景: 提示:这里简述项目相关背景: iphone微信小程序底部预留bar安全距离css 问题描述提示:这里描述项目中遇到的问题: iphone微信小程序底部预留bar安全距离css @Over ...
小程序底部tabbar加数字标
小程序底部tabbar悬浮数字标功能实现效果如下: 大家都知道小程序的底部,是通过APP,JSON进行配置的,如果想要在下面的tabbar上面做手脚的话,网上搜索是找不到方法的,好多小白见到这种需求 ...
小程序底部tabBar购物车右上角增加数字
小程序底部tabBar购物车右上角增加数字 data: {num:'1'},onShow:function(){var num=1;if(num==''){wx.removeTabBarBadge({ ...

小程序底部兼容iphoneX

小程序底部兼容iphoneX相关推荐

最新文章

热门文章