小程序自定义导航适配header高度及底部安全距离高度

最近在接触小程序 部分基础做一下笔记
在适配各个机型刘海屏或者ios底部安全距离适配

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取手机系统信息
    let systemInfo = wx.getSystemInfoSync();

    // 屏幕顶部状态栏高度
    let statusBarHeight = Number(systemInfo.statusBarHeight);

    // 获取胶囊区信息
    let menu = wx.getMenuButtonBoundingClientRect();

    // 胶囊区高度
    let menuHeight = menu.height;

    // 胶囊区距离屏幕顶部的距离
    let menuTop = menu.top;

    // 屏幕顶部导航栏高度
    let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2;

    // 屏幕顶部状态栏加导航栏高度
    let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2;

    // 屏幕底部安全区高度
    // css 可用 env(safe-area-inset-bottom) 或 constant(safe-area-inset-bottom)
    let iosSABottom = Number(systemInfo.screenHeight - systemInfo.safeArea.bottom);
    
    this.setData({
        // iosSABottom: iosSABottom,
        titleTopDistance: statusBarHeight - 2,
        navStatusBarHeight: navStatusBarHeight
    })
    console.log("获取手机系统信息", systemInfo);
    console.log("获取胶囊区信息", menu);
    console.log("胶囊区高度", menuHeight);
    console.log("胶囊区距离屏幕顶部的距离", menuTop);
    console.log("屏幕顶部状态栏高度", statusBarHeight);
    console.log("屏幕顶部导航栏高度", navBarHeight);
    console.log("屏幕顶部状态栏加导航栏高度", navStatusBarHeight);
    console.log("屏幕底部安全区高度", iosSABottom);
  },

---

// 这里header 我使用了 屏幕顶部状态栏加导航栏高度", navStatusBarHeight 减去 我自定义header的高度 记得rpx和px单位的的换算

---

另，底部安全距离找到两种写法 也没有完全弄清楚 但是目前看可行

//  一种是在标签内通过获取"屏幕底部安全区高度", iosSABottom  这里的70是我项目中底部fix的导航高度 具体根据实际情况


//  另外一种是在样式中
margin-bottom: calc(env(safe-area-inset-bottom) + 70px);