微信小程序之自定义导航栏

最近翻查微信小程序api时，发现app.json下window下面新增了"navigationStyle"属性，并且有一个参数，可以使用"custom"来可以实现全屏显示小程序页面（只保留右上角胶囊按钮），但这里有一个小提示，此参数对于web-view页面无效。 在制作之前我们再来了解一下两个api，这两个api可以让我们更好的制作自定义导航栏 1.获取系统信息（wx.getSystemInfo或wx.getSystemInfoSync）需要statusBarHeight(状态栏的高度，以下statusBarHeight为此api的简介)

2.获取右上角胶囊菜单的参数（wx.getMenuButtonBoundingClientRect） 获取菜单按钮（右上角胶囊按钮。'胶囊按钮'为以下api的简称）的布局位置信息。坐标信息以屏幕左上角为原点。其中返回width,height,top,right,bottom,left等属性，其中我们使用height,因为heght是自定义导航的整个高度 具体，看图

提醒，此参数在开发者工具与实机表示不一致，上面的截图是从7p上截取出来的,关于此api还有一些提示，如果在获取过程中有定位，可能此api的各个参数会变更。所以建议此参数在小程序初始(onLoad)时获取一次保存下。

这里上先一张结果图，后面我们再来分析为何要使用两个api来制作

其中蓝色块为statusBarHeight的高度，红色块为（胶囊菜单的高度-statusBarHeight）的结果。什么要减掉statusBarHeight，是因为，在不减掉statusBarHeight的时候，整个胶囊菜单的高度就是蓝色块加红色块，这种布局不得于我们后期布局导航栏，因为各个手机差导导致，其中全面屏差异最大。

以上代码为演示，代码可能不优雅。

app.js

  globaldata:{},
  onLaunch: function () {
    this.globaldata.menu = (wx.getMenuButtonBoundingClientRect().height + wx.getMenuButtonBoundingClientRect().top) - wx.getSystemInfoSync().statusBarHeight
    this.globaldata.statusBar = wx.getSystemInfoSync().statusBarHeight
  }
})```
title.wxml
```<view class="top" style='height:{{top}}px;background:blue;'></view>
<view class='menu' style='background:red;overflow:hidden;'>
  <view class='title' style='line-height:{{menu}}px;height:{{menu}}px'>
    <text>我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</text>
  </view>
  <view class='sub'>
    我是左边菜单
  </view>
</view>
复制代码

title.wxss

  margin: 30px;
  text-align: center;
  padding:30px;
  box-sizing: border-box
}
.title{
  width:100%;
  text-align: center;
  
}
.title text{  
  display: block;
  width:100px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu{
  position: relative;
  font-size: 32rpx;
}
.sub{
  position: absolute;
  left:30rpx;
  top:50%;
  transform: translateY(-50%);
  width:120px;
  /* height: 10px; */
  background: pink;
}
复制代码

至此，自定义导航栏完工，但此时还有一些不完美。 提示：在ios手机上拖住自定导航栏可以滑动事个页面，没有原生的那个效果。可以在页面的json配置里加上 "disableScroll": true,配置，就整个页面不能拖动了。如果需要内容拖动，又不想自定义导航不能拖动的话，请配合小程序的scroll-view组件