微信小程序> 小程序界面部分空白适配iPhoneX

小程序界面部分空白适配iPhoneX

浏览量:4454 时间: 来源:江小白miss

有时候我们的页面发现在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

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎