特殊适配场景(iPhone X)

首先通过wx.getSystemInfo获取设备信息,代码中的model就是设备的型号信息,如果model中包含Ipx,我们就认为该设备就是Iphone X,我们在app.js文件进行检测,在全局添加一个isIpx的字段,再将结果赋予isIpx,再通过wxml读取这个数值,最后再来定义wxss,通过!important提高底部栏的高度,这样就能实现一个吸底按钮的适配效果。

1、wx.getSystemInfo获取设备信息

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)
  }
})

2、wxml文件

<view class="button-group {{isIpx?'fix-iphonex-button':''}}"> 这是一个吸底按钮区域</view>

3、js 文件

let app = getApp();
Page({
  data: {
    isIpx: app.globalData.isIpx ? ture : false
  }
})

4、wxss文件

.fix-iphonex-button {
  bottom: 68rpx!important;
}
.fix-iphonex-button::after {
  content: '';
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 2,355评论 0 12
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    伍华聪_开发框架阅读 1,635评论 0 53
  • 一、 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸、分辨...
    衡胖子哇阅读 11,624评论 0 3
  • 微信小程序的特点 小程序是一种不需要下载、安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开...
    Simple_3f19阅读 895评论 0 0
  • 第一章 什么是微信小程序 1. 小程序介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取...
    呆毛和二货阅读 877评论 0 1