微信小程序页面头部高度自适应

1.在app动态获取页面头部导航高度

wx.getSystemInfo({
      success: res => {
        //导航高度
        //console.log( res.statusBarHeight + 46)
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })

2.定义头部组件 组件js

const App = getApp();//设立顶部栏高度
Component({
  options: {
  },
  data: {
    navH: App.globalData.navHeight
  }
})

组件json

{
  "component": true
}

组件wxml

<view>
  <view class="topmian" style='height:{{navH}}px'>
    <image class="topmainimg" mode="widthFix" src="/image/trueland.png"></image>
  </view>
</view>

组件wxss自己写 3.需要引入的页面 （1）.修改当前页面头部，自定义页面头图,引入组件 引入页面json

{
  "navigationBarTitleText": "",
  "navigationStyle":"custom",
  "usingComponents": {
      "home":"/pages/component/home/home"
    }
}

(2).页面js

const App = getApp();//设立顶部栏高度
data: {
    navH: App.globalData.navHeight
  },

(3).页面中使用组件,直接插入页面就可以了

<home ></home>