微信小程序之自定義頂部導航欄

首先創建一個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;
}

代碼可供複製引用查看效果。