微信小程序自定义导航栏适配机型

目标效果

自定义导航栏适配各个机型宽高

export default function fitScreen(params) {
  return new Promise(function (resolve, reject) {
    wx.getSystemInfo({
      success(res) {
        // 获取获取状态栏高度
        var statusBarHeight = res.statusBarHeight;
        // 获取胶囊体高度
        var menuButtonBoundingHeight = wx.getMenuButtonBoundingClientRect().height;
        // 获取胶囊体到屏幕上边的距离
        var menuButtonBoundingtop = wx.getMenuButtonBoundingClientRect().top;
        // 结果是返回一个对象
        resolve({
          statusBarHeight: statusBarHeight,
          menuButtonBoundingHeight: menuButtonBoundingHeight,
          menuButtonBoundingtop: menuButtonBoundingtop
        });
      },
      fail(err) {
        reject(err);
      },
      complete(a) {
      }
    })
  })
}

import fitScreen from '../utils/fit-screen';
Component({
  data:{
    navClassStyle: '',
  },
  lifetimes:{
    attached: function() {
      this.getNavInfo();
      let that = this;
      fitScreen().then(function(res) {
        that.setData({
          navClassStyle: 'height:' + res.menuButtonBoundingHeight+'px;margin:'+ res.menuButtonBoundingtop + 'px auto',
        })
        console.log(that.data.navClassStyle);
      });
    }
  },
  methods: {
    },
  }
})