微信小程序自定义头部

微信小程序自定义头部

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中
    

   
   		设备管理
   	
   	
   

   js中
    

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

    

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

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