有时候我们的页面发现在iPhone X运行起来的时候,下面有一部分是空白的,那我们
怎么解决这个问题了,首先我们就应该在打开程序的时候获取手机机型,然后用过全局变量,告诉界面本次使用的手机是不是iPhoneX
const api = require('./utils/api')//app.jsApp({ onLaunch: function (ops) { // 展示本地存储能力 if (ops.scene == 1044) { console.log(ops.shareTicket) } var _this = this wx.getSystemInfo({ success: function (res) { // console.log(res.model) // console.log(res.pixelRatio) // console.log(res.windowWidth) // console.log(res.windowHeight) // console.log(res.language) // console.log(res.version) // console.log(res.platform) if (res.model == 'iPhone X') { _this.globalData.isIpx= true; // console.log(_this.globalData.isIpx) } } }) }, globalData: { isIpx: false }})
然后我们需要给iPhone X和正常的手机各一套css样式
/* app.wxss */.fix-iphonex-button { background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1)); height: 1448rpx; width: 100%;}.fix-iphonex-button::after { background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1)); height: 1206rpx; width: 100%;}
界面View在给class的时候根据isIpx来判断给哪个样式
view class="container" class="{{isIpx?'fix-iphonex-button':'fix-iphonex-button::after'}}" .....内容 /view
小程序