微信小程序在适配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的逻辑判断
<view class="{{isIphoneX?'linkCon':''}} flex "> </wiew>
css自己加个向下的距离,或者定位看个人需求就好了
本文介绍了一种解决微信小程序在iPhoneX上底部横线遮挡的方法。通过在app.js中设置全局变量来检测设备型号,并在需要的页面中加载对应的样式调整。此方案能够有效避免布局问题。
4634

被折叠的 条评论
为什么被折叠?



