微信小程序——自定义导航栏(简单版)

一、为什么要自定义导航栏

 在微信小程序中，导航栏标题是居中的，如果我们想居左怎么办呢？
 想在标题添加图标怎么添加呢？在开发文档我们是找不到相关属性的供我们修改的，
 此时就需要自定义导航栏，才能达到我们想要的样式。

一、自定义导航栏方法
1.在app.json文件中添加

"navigationStyle":"custom"  //custom 模式可自定义导航栏，只保留右上角胶囊状的按钮.

完整代码：

 "window": {    
	   "backgroundTextStyle": "light",   
	   "navigationBarBackgroundColor": "#000000",    
	   "navigationBarTitleText": "WeChat",   
	   "navigationBarTextStyle": "black",   
	   "navigationStyle":"custom" 
	},

window相关属性具体使用方式，可查看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#配置项

2.根据自己的需求写页面结构及样式。
可以在页面直接写导航栏结构，此处我还是建议以组件的形式，这样就可以多页面复用。

在项目中新建目录compnent—右键新建Component(ps:名字可以任意取哦)

navBar.wxml文件中导航栏页面结构

 <view class="navbarBox" style="height:{{navHeight2}}px"> 
   <view style="width:460rpx;padding-left:10px;">      
    <view class="navBar" style="top:{{navTop}}px; height:{{navHeight}}px">        
     <icon type="search" size="30" />        
     <input  placeholder="请输入搜索内容" class="input"></input>     
    </view> 
   </view>
</view>

在navBar.wxss文件写导航样式

.navBar{ 
	position: relative; 
	 border-radius:20px;  
	 border:1px solid white; 
	 display:flex;  
	 background-color: white; 
	 opacity: 0.3；
}
 input{  
        height: 100%;
 }
.navbarBox{  
   background-color: red; 
    border: 1px solid red;
 }
    

在我们写导航样式我们就会遇到一个问题：安卓和iphone系列头部的状态栏大小和胶囊距离是不相同的，特别是iphonex系列，那导航的高度我们设置为多少呢？此时我们是需要获取设备参数和胶囊位置去计算导航栏的高度。

在aap.js中获取胶囊按钮位置与设备信息

App({ 
     onLaunch: function () {      
	var that = this.globalData    //全局变量赋值，方便下面代码使用
       let menuButtonObjet = wx.getMenuButtonBoundingClientRect() //获取胶囊的位置
       wx.getSystemInfo({      
       	  success: function (res) {
       	       console.log(res)//可以打印返回的值，选择自己需要的        
	       let statusBarHeight = res.statusBarHeight;//设置顶部标签栏的信息        
	       let navTop = menuButtonObjet.top;//胶囊按钮与顶部的距离        
	       let navHeight = statusBarHeight + menuButtonObjet.height + (navTop - 			statusBarHeight) * 2 //导航栏的高度  
	      //把需要的值存在全局变量中      
	       that.navHeight = menuButtonObjet.height ;        
               that.navHeight2 = navHeight         
               that.navTop = navTop;        
               that.statusBarHeight = statusBarHeight;        
               that.windowHeight = res.windowHeight;//设置屏幕的高度        
               that.screenWidth = res.screenWidth;        
                    
         }    
      })    
    }，
    globalData: {    
         userInfo: null 
    }
})

在navBar.js中定义导航需要使用的变量

  const App = getApp();
  Component({  
	  /**   * 组件的属性列表   */  
	  properties: {
	  },
	  /**   * 组件的初始数据   */      
          data: {    
                 //取获取的导航参数
		  navTop: App.globalData.navTop,    
		  navHeight:App.globalData.navHeight,    
		  navHeight2: App.globalData.navHeight2  
         },  
	//组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）  
	lifetimes: { 
	     attached: function () {    
	     // 在组件实例进入页面节点树时执行   
	     } 
	},  
	/**   * 组件的方法列表   */   
         methods: {
	 }
  })

在使用组件页面的json文件中

{  "usingComponents": {   
   "navBar":"/pages/compnent/navBar"  
   }
}

在需要的页面加入导航组件

<navBar></navBar>