微信小程序自定义导航栏（带汉堡包菜单）

微信小程序自定义导航栏（带汉堡包菜单）

1.在app.json中 window配置navigationStyle
(如果单独页面使用，可在页面的json文件配置)

2.计算相关值

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3. 胶囊按钮与右侧的距离 = windowWidth - right。

App.js 代码如下：

3.头部组件navBar

navBar.wxml

<view class="navbar" style="height:{{navHeight}}px;">
    <view class="navbar_left" style="top:{{navTop}}px;" wx:if="{{showNav}}">
      <view class="btn" bindtap="navBack">
          <text class="iconfont icon-jiantouzuo"></text>       
      </view>
      <view class="nav_line"></view>
      <view class="btn"  bindtap="navMenu" wx:if="{{showHome}}">
        <text class="iconfont icon-hanbaobao"></text>       
      </view>
    </view>
　　<!-- 中间标题 -->
　　<view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view>
    <!-- 弹出菜单 -->
    <view class="modal-mask" wx:if='{{isMask}}' catchtouchmove="preventTouchMove" bindtap="hiddenMask"></view>
    <view wx:if="{{isMask}}" class="maskMenu" style="top:{{navHeight+8}}px">
      <view></view>
      <view>
        <view bindtap="navIndex">
          <text style="color:#222; margin-right:10rpx;font-size:36rpx;" class="iconfont icon-shouye2"></text>
          <text>首页</text>
        </view>
        <view></view>
        <view bindtap="navUser">  
          <text style="color:#222; margin-right:10rpx;font-size:36rpx;" class="iconfont icon-wode"></text>
          <text>我的</text>
        </view>
      </view>
    </view>

</view>

navBar.wxss

.navbar {
  width: 100%;
  /* overflow: hidden; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
}
.navbar_left{
  /* width: 170rpx; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  left: 10px;
  z-index: 11;
  padding: 6rpx 20rpx 6rpx 10rpx;
  border:1rpx solid #f0f0f0;
  border-radius: 40rpx;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.btn{
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
}
.nav_line{
  width: 2rpx;
  height: 40rpx;
  background: #f0f0f0;
  margin: 0 10rpx;
}
.navbar_title{
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #222;
  font-size: 36rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.modal-mask {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0; overflow: hidden; z-index: 9;}

.maskMenu{ position: absolute;left: 25rpx; z-index: 10;
}
.maskMenu>view:nth-child(1){
  position: absolute;top: -11rpx; background: #fff; left: 85rpx; width: 30rpx;height: 30rpx;box-shadow:-2rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.25); transform:rotate(45deg);
}
.maskMenu>view:nth-child(2){
width:200rpx;height:153rpx;background:rgba(255,255,255,1);box-shadow:0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.45);border-radius: 10rpx;
  padding: 10rpx 0rpx 10rpx 20rpx; border-color: #ccc;
  display: flex; flex-direction: column;justify-content: space-around;font-size: 28rpx;color: #222222;
}
.maskMenu>view:nth-child(2)>view{ display: flex;align-items: center; }
.maskMenu>view:nth-child(2)>view:nth-child(2){ width: 100%;height: 2rpx;background: #ccc; }

navBar.js

const App = getApp();
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    pageName: String,  //中间的title
    showNav: {         //判断是否显示左上角的按钮    
      type: Boolean,
      value: true
    },
    showHome: {         //判断是否显示左上角的home按钮
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showNav: true,     //判断是否显示左上角的home按钮
    showHome: true,     //判断是否显示左上角的按钮
    isMask: false,
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
  * 弹出框蒙层截断touchmove事件
  */
    preventTouchMove: function () {
      return
    },
    //回退
    navBack: function () {
      wx.navigateBack()
    },
    //菜单
    navMenu: function () {
      this.setData({
        isMask : !this.data.isMask
      })
    },
    hiddenMask :function(){
      this.setData({
        isMask : false
      })
    },
    navIndex :function(){
      wx.switchTab({
        url: '../../pages/index/index',
      })
    },
    navUser: function () {
      wx.switchTab({
        url: '../../pages/user/user',
      })
    }
  }
})

navBar.json

{
  "component" : true,
  "usingComponents" : {}
}

4.index中
index.json

index.wxml

<view class="view-page">
  <navbar page-name="你当前页面的名字" show-nav="{{showNav}}" show-home="{{showHome}}"></navbar>
  <view class='page-content' style="margin-top:{{navHeight}}px;">
    <!--这里放你的内容-->
  </view>
</view>

index.js

const app = getApp()
Page({
	data:{
	    navHeight: app.globalData.navHeight,
		showNav:true,
    	showHome:true,
	}
)}

效果图