uni小程序底部适配和顶部自定义刘海适配

App.vue

  globalData: {
    test: false,
    statusBarHeight: 0,
  },

  created() {
    var that = this;
    wx.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;
        }
      },
    });
  },

index.vue//底部有按钮适配部分ios手机需要太高

     <view class="form_div" @click="btnSave">
        <button class="btn_save">提交</button>
        <view class="btn_save_fff" v-if="testStyle == true"></view>
      </view>

.btn_save_fff {
  width: 100%;
  background-color: #ffffff;
  height: 44rpx;
}


let App = getApp();
export default {
  data() {
    return {
          testStyle: false,
       }
  }

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

demo.vue//这是自定义头部标题栏以后,适配刘海屏幕的

  <view
      class="status_bar"
      v-bind:style="{ height: statusBarHeight + 'px' }"
    ></view>
    <view class="v_header">
      <view class="img" @click="reBTN">
        <img
          src="https://wosz.oss-cn-beijing.aliyuncs.com/smart-park/wxb5b46a9eae633f52.o6zAJsxNb2jnh3iZeDRZlAEH05yM.WbXiu2rmjFc895c59f2a73450e4acb4d5aa59a0e6394.png"
          class="img_"
        />
      </view>
      <view>关于我们</view>
      <view></view>
    </view>

.status_bar {
  width: 100%;
}
.v_header {
  display: flex;
  height: 88rpx;
  width: 90%;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  border-bottom: 1rpx #eeeeee solid;
}
.v_header .img_ {
  height: 35rpx;
  width: 20rpx;
}

export default {
  data() {
    return {
      statusBarHeight: "",
    };
  },
  onLoad: function() {
    var statusBarHeight = getApp().globalData.statusBarHeight; //高度
    this.statusBarHeight = statusBarHeight;
  },

  methods: {
    reBTN() {
      wx.switchTab({
        url: "/pages/mine/index",
      });
    },
  },
};