小程序自定义nav-bar组件

支持自定义左边内容，自定义右边内容，支持自定义标题
支持左边点击事件，右边点击事件
支持修改背景色

app.js
整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight ) * 2
胶囊按钮与顶部的距离 = top；
胶囊按钮与右侧的距离 = windowWidth - right

onLaunch() {
	let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: (res) => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
          barRight = res.windowWidth  - menuButtonObject.right, //胶囊按钮与右侧的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.barRight = barRight;
        this.globalData.windowHeight = res.windowHeight;
        this.globalData.windowWidth = res.windowWidth;
      }
    })
},
globalData: {
  navHeight: 0,
  navTop: 0,
  barRight: 0,
  windowHeight: 0,
  windowWidth:0,
}

wxml

<view class="navbar" style='height:{{navHeight}}px;background-color:{{bgColor}}'>
  <view wx:if="{{showLeftNav}}" class="position fxNav lineHeight navbar_item left-navbar_item"
    style='top:{{navTop}}px;'>
    <view bindtap="navBack" data-type="left">
      <slot name="left"></slot>
    </view>
  </view>
  <view class='navbar-title position wrap lineHeight navbar_item' style='top:{{navTop}}px'>
    <view wx:if="{{showHome}}">
      {{pageName}}
    </view>
  </view>
  <view wx:if="{{showRightNav}}" class="position fxNav lineHeight navbar_item right-navbar_item"
    style='top:{{navTop}}px;'>
    <view bindtap="navBack" data-type="right">
      <slot name='right'></slot>
    </view>
  </view>
</view>

wxss

.navbar {
  width: 100%;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  /* flex-shrink: 0; */
}
.navbar-title {
  width: 100%;
  box-sizing: border-box;
  padding: 0 130px;
  text-align: center;
  left: 0;
  font-size: 14px;
  /* padding: 0 115px; */
  /* font-weight: bold; */
}
.left-navbar_item {
  left: 10px;
  z-index: 14;
}
.right-navbar_item {
  right:105px;
  z-index: 14;
}
/* 通用工具类 */
.navbar_item {
  z-index: 11;
  overflow: hidden;
  color: #333;
}
.position {
  position: absolute;
}
.lineHeight {
  height: 33px;
  line-height: 33px;
}
.fxNav {
  display: flex;
  align-items: center;
}
.wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

js

const App = getApp();

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
   // 标题内容
    pageName: String,
    // 是否显示左边盒子
    showLeftNav: {
      type: Boolean,
      value: false
    },
    // 是否显示右边盒子
    showRightNav: {
      type: Boolean,
      value: false
    },
    // 是否显示中间标题
    showHome: {
      type: Boolean,
      value: true
    },
    // 导航栏背景色
    bgColor: {
      type: String,
      value: "#fff"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navHeight: 0,
    navTop: 0,
    barRight: 0,
  },
  lifetimes: {
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop,
        barRight: App.globalData.barRight,
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //自定义两侧按钮点击事件
    navItem(e) {
      let {
        type
      } = e.currentTarget.dataset
      switch (type) {
        case "left":
          this.triggerEvent("leftClick")
          break
        case "right":
          this.triggerEvent("rightClick")
          break
      }
    },

  }
})

页面使用

在小程序页面中开启自定义导航栏

"usingComponents": {
    "nav-bar": "../../../components/navbar/navbar"
  },
"navigationStyle":"custom"

wxml
showLeftNav：是否显示左边自定义内容，默认：false
showRightNav：是否显示右边自定义内容，默认：false
showHome：是否显示标题，默认：true
bgColor : 导航栏背景色，默认：#fff
bindLeftClick：左侧盒子点击
bindRightClick：右侧盒子点击

<nav-bar showLeftNav="{{true}}" showRightNav="{{true}}" page-name="详情" bindleftClick="leftClick"
  bindrightClick="rightClick">
  <van-icon name="arrow-left" slot="left" style="font-size: 20px;" />
  <view slot="right" style="font-size: 20px; color: #2A77FF;" class="iconfont icon-erji"></view>
</nav-bar>

js

page({
	rightClick() {
		console.log("点击了右边right")
	},
	leftClick() {
		console.log("点击了左边left")
	},
})