微信小程序中的iPhone X适配解决

原因：

微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图：

解决方案：

步骤一：在app.js文件中创建全局变量，然后获取设备型号
globalData: {
isIphoneX: false,
userInfo: null
},
onShow:function(){
let that = this;
wx.getSystemInfo({
success: res=>{
// console.log('手机信息res'+res.model)
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1) {
that.globalData.isIphoneX = true
}

}
})

},

获取的手机机型如图：

步骤二：在需要引用的页面js文件中onload方法里获取全局变量

let isIphoneX = app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})

步骤三：在 wxml文件中进行css的逻辑判断

步骤四：在 wxss文件中进行css，修改自己需要的css样式即可

.isIPX {

padding-bottom: 30rpx !important;

}

结果如图：

微信小程序中的iPhone X适配解决相关推荐

微信小程序中的iPhone X适配问题
小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({success: function (r ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
微信小程序canvas大小、定位适配
微信小程序canvas大小.定位适配在微信小程序canvas开发中,遇到一种情况:在iPhone X调好的定位大小,把机型调整为iPhone 5,由于iPhone5屏幕较小,canvas画出的内容就 ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
微信小程序中基础入门
一.数据绑定 1.数据绑定的基本原则 ① 在data中定义数据(在.js文件) ② 在wxml中使用数据 2.Mustache语法的格式把data中的数据绑定到页面中进行渲染,使用MUstache语 ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
微信小程序中rpx和px的区别？
大家用微信开发,肯定会接触到一个新的像素单位"rpx". 那么"rpx"跟之前我们进行网页开发的"px"相比较有什么区别呢? 查看微信文档, ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...

微信小程序中的iPhone X适配解决

微信小程序中的iPhone X适配解决相关推荐

最新文章

热门文章