微信小程序自定义头部

微信小程序自定义头部

1.  获取导航栏的信息，在app.js中调用，将值存储 
    

   //自定义头部组件使用
     getSysInfo:function(){
         let menuButtonObject = wx.getMenuButtonBoundingClientRect();
         const res = wx.getSystemInfoSync(); //此处进行同步调用
         console.log("getSystemInfo",res);
         let statusBarHeight = res.statusBarHeight;  //导航栏高度
         let navTop = menuButtonObject.top;//胶囊按钮与顶部的距离
         let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2 ; //导航高度
         console.log("胶囊信息",menuButtonObject, "状态栏高度",statusBarHeight);
         this.globalData.navHeight = navHeight + 5;
         this.globalData.navTop = navTop;
         this.globalData.windowHeight = res.windowHeight;
         this.globalData.platform = res.platform;
         wx.setStorageSync('topheight', navHeight + 5);
       },

2. 全局进行配置
    

   "window": {
       "navigationStyle":"custom"
     },
3. 单个页面使用
   
   wxml中
    

   <view class="top-menus" style="height:{
        
        {navHeight}}px">
   		<view class="navbar-title top-menus-title" style="top:{
        
        {navTop}}px">设备管理</view>
   	</view>
   	<view style="height:{
        
        {navHeight}}px;background: light;"></view>
   </view>

   js中
    

     navHeight: APP.globalData.navHeight,
     navTop: APP.globalData.navTop,

4. 设置单独的页面标题以及引用组件

   {
     "usingComponents": {
       "nonetip":"组件地址",
     },
     "navigationBarTitleText":"设备管理"
   }