uniapp小程序适配异形屏

App.vue写入

globalData: { // 适配刘海屏test: false,statusBarHeight: 0,},created() {var that = this;uni.getSystemInfo({ //GetSystemInfo函数用于获取当前系统的信息。success(res) {console.log("设备品牌:", res.brand);console.log("设备型号:", res.model);console.log("设备像素比:", res.pixelRatio);console.log("屏幕宽度:", res.windowWidth);console.log("屏幕高度:", res.windowHeight);console.log("状态栏的高度:", res.statusBarHeight);console.log("微信设置的语言:", res.language);console.log("微信版本号:", res.version);console.log("操作系统及版本:", res.system);console.log("客户端平台:", res.platform);console.log("用户字体大小:", res.fontSizeSetting);console.log("客户端基础库版本 :", res.SDKVersion);console.log("设备性能等级:", res.benchmarkLevel);console.log(res, "hheightt");that.$options.globalData.statusBarHeight = res.statusBarHeight;//model中包含着设备信息const model = res.model;// console.log("手机信息res----" + res.model, res);if (/iPhone X/i.test(model)) {console.log("iPhone X", "机型");that.$options.globalData.test = true;} else if (/iPhone 11/i.test(model)) {console.log("iPhone 11", "机型");that.$options.globalData.test = true;} else if (/iphone\sx/i.test(model) ||(/iphone/i.test(model) && /unknown/.test(model)) ||/iphone\s11/.test(model)) {console.log("iPhone sx/s11", "机型");that.$options.globalData.test = true;} else {console.log("其他", "机型");that.$options.globalData.test = false;}},});},

底部适配横线

先把 let App = getApp() 写上
随便定义一个字段等于false

<script>import homeApi from '@/api/home/index.js'let App = getApp()export default {data() {return {testStyle: false, //iPhone底部适配pageNum: 1,pageSize: 10,equipmentListArr: [],status: 'loadmore', //加载更多pH:0, //窗口高度navHeight:0, //元素的所需高度keyword: '', //搜索内容};},}
</script>

接下来在页面的生命周期中获取全局变量

onShow() {var globalStyle = getApp().globalData.test; //获取全局变量this.testStyle = globalStyle;},

异形屏ui适配、然后再view上做判断

<view :class="testStyle == true ? 'addBtnTrue' : 'addBtnFalse'"><view class="btn-text">新增管理</view></view>

.addBtnTrue{z-index: 99;position: fixed;bottom: 0;width: 100%;padding-bottom: 53rpx;background-color: #FFFFFF;.btn-text {font-size: 32rpx;color: #ffffff;background-color: #2F77F1;padding: 32rpx 0;text-align: center;}}.addBtnFalse{z-index: 99;position: fixed;bottom: 0;width: 100%;background-color: #FFFFFF;.btn-text {font-size: 32rpx;color: #ffffff;background-color: #2F77F1;padding: 32rpx 0;text-align: center;}}

小程序自定义顶部适配

直接上代码，步骤差不多

data定义   statusBarHeight: "", //获取的状态栏高度
页面生命周期写入let statusBarHeight = getApp().globalData.statusBarHeight; //获取屏幕高度this.statusBarHeight = statusBarHeight; //适配高度
最后再需要适配的地方style样式绑定:style="{ top: statusBarHeight + 'px'}"