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

首先创建一个components的模板组件文件夹，里面放上我的顶部自定义模板。如图：

写好自定义组件后，记得在每个页面的.json中加上：

{
  "usingComponents": {
    "navbar": "/components/navbar/navbar"  //组件的位置
  },
  "navigationStyle": "custom"
}

引用组件的每个页面的wxml加上：

<navbar navTitle="请假条" back home></navbar>
//navTitle的值是你想要这个页面展示的顶部标题

效果图为：

js：

// navbar.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    navHeight: {
      type: Number,
      value: 20
    },
    navTitleTop: {
      type: Number,
      value: 26
    },
    navTitle: { // 导航标题 可以为空
      type: String,
      value: ''
    },
    navTitleColor: { // 导航标题颜色 默认黑色
      type: String,
      value: '#fff'
    },
    isWhite: { // 是否为白底
      type: String,
      value: 'true'
    },
    navColor: { // 导航栏背景色 默认白色
      type: String,
      value:'#36ab60'
    },
    back:{
      type:String,
      value:'true'
    },
    home:{
      type:String,
      value:'true'
    },
    backPath: { // 返回页面路径
      type: String,
      default: ''
    },
    backDelta: { // 返回页面层数
      type: Number,
      default: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navHeight: 0,
    navTitleTop: 0
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    // 获取顶部导航高度
    this.setData({
      navHeight: app.globalData.navHeight,
      navTitleTop: app.globalData.navTitleTop
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 回到首页
    navHome: function () {
      wx.switchTab({
        url: '/pages/index/index'
      })
    },
    // 回到顶部
    toTop: function () {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
      this.triggerEvent('scrollEvent', {}) // 可绑定点击标题栏时的事件
    },
    // 返回上一页
    navBack: function () {
      if (this.properties.backPath === '') {
        wx.navigateBack({
          delta: this.properties.backDelta
        })
      } else {
        wx.redirectTo({
          url: this.properties.backPath
        })
      }
      this.triggerEvent('backEvent', {}) // 可绑定点击返回时的事件
    }
  }
})

wxml：

<!--navbar.wxml-->
<view>
  <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}" style="height: {{navHeight}}px;background-color:{{navColor}};" catchtap="toTop">
    <!-- 标题 -->
    <text class="navbar-title" style="top:{{navTitleTop}}px;color:{{navTitleColor}};">{{navTitle}}</text>

    <view wx:if="{{ back=='true' || home=='true'}}" class="navbarImg" style="top:{{navTitleTop}}px;">

      <view wx:if="{{back}}" catchtap="navBack" class="navbar-icon-wrap">
        <image src="../../images/left.png" class="navbar-icon"></image>
      </view>
      <view class="navbar-icon-wrap">
        <image src="../../images/shu.png" class="navbar-icon"></image>
      </view>
      <view wx:if="{{home}}" catchtap="navHome" class="navbar-icon-wrap">
        <image src="../../images/home.png" class="navbar-icon"></image>
      </view>

    </view>

  </view>

  <view wx:if="{{isWhite=='true'}}" class="nav-bar-place" style="height: {{navHeight}}px;background-color:{{navColor}};"></view>

</view>

css：

/* navbar.wxss */
/*自定义导航栏*/
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}

.nav-bar-white {
  height: 40rpx;
  background-color: #fff;
}

.navbar-title {
  position: absolute;
  height: 32px;
  line-height: 32px;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;

  font-size: 16px;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbarImg{
  position: absolute;
  height: 32px;
  line-height: 32px;
  /* width: 100%; */
  width: 100rpx;
  /* border: 1px solid black; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
  border-radius: rpx;
}



.navbar-icon-wrap {
  width: 44px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon-wrap image{
  width: 45rpx;
  height: 45rpx;
}

.navbar-icon {
  width: 44px;
  height: 32px;
}

.navbar-scan {
  width: 28px;
  height: 28px;
}

代码可供复制引用查看效果。