微信小程序适配iphoneX
时间 :
2022-10-31
编辑 :admin
在小程序开发中,涉及到适配iphonex的情况主要就是在页面的最下出现button的情况,对于这个的解决思路就是:
1.获取设备型号:
// 在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
}
}
})
},
2.根据不同的设备,设置不同的css样式,另外在html布局的时候button放进别的容器标签中例如:
xx.wxml
<view class='contentView' style='padding-bottom:{{btuBottom}}'>
<button class='but'>Button </button>
</view>
xx.js
data: {
btuBottom:"";
},
//在这里只需要判断是不是iphonex,然后设置下padding-bottom:即可
onLoad: function (options) {
let isPhone = app.globalData.isIphoneX;
if(isPhone){
this.setData({
btuBottom:"68rpx",
})
}
}
