自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型

修改前情况

修改后情况

打开项目文件 app.vueapp.vue1.增加全局参数
globalData: {
isIphoneXup:false,//是否iphonex以及以上的版本
},2.增加获取机型
onShow: function() {
console.log('App Show');
var that = this
// 获取设备机型
wx.getSystemInfo({
success: res=>{
console.log(res)
let model = res.model;
if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)|| /iPhone\s12/i.test(model)){
console.log("是x以上")
that.globalData.isIphoneXup = true;
}else{
console.log("不是x以上")
that.globalData.isIphoneXup = false;
}
}
})
},3.增加全局样式，下补白
.isIPXup{
padding-bottom: 68rpx !important;
}在需要引入的页面，如底部导航条的组件页面
mounted() {
//获取当前设备机型
this.isIphoneXup = app.globalData.isIphoneXup?app.globalData.isIphoneXup:false
// console.log(this.tabBar.list)
},

这个是uniapp的写法。所以写法类似vue。如果是小程序的原生写法。可自己转换成小程序原生写法即可。

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型相关推荐

微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序自定义底部导航 custom-tab-bar
前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航:或者导航样式需要个性化设计.此时就需要用到自定义底部导航 custom-tab-bar. 具体操作: 1.根目录下创建custo ...
uniapp 底部菜单_uni-app 自定义底部导航栏的实现
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写 ...
程序根据手机机型设置自定义底部导航距离
需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时,会触发 onLaunch( ...
小程序根据手机机型设置自定义底部导航距离
需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时,会触发 onLaunch( ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
uniapp里自定义底部导航
1.来先看效果图: 2.在uniapp里tabbar不能完全满足客户需求,所以这就需要开发者自定义封装一个底部导航组件. 3.先在components里创建一个tabbar.vue 具体代码: < ...
Android 自定义底部导航栏消息显示
转载请标明出处: http://blog.csdn.net/tyzlmjj/article/details/47186249 本文出自:[M家杰的博客] 概述底部导航栏的做法多种多样,这次主要用到了 ...
android底部导航栏网络请求有冲突,Android 自定义底部导航栏 CustomizeTabLayout（支持访问网络图片、本地图片）...
先看效果网络图片(使用第三方库Glide加载图片) GIF1.gif 本地图片 GIF2.gif 使用方法 xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配) activity ...

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型

修改前情况

修改后情况

自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型相关推荐

最新文章

热门文章