├── components     組件
│ ├── headerNavbar    頂部自定義導航欄
│ │ └── headerNavbar.js
│ │ └── headerNavbar.json
│ │ └── headerNavbar.wxml
│ │ └── headerNavbar.wxss
├── pages      頁面
│ ├── index     首頁
│ │ └── index.js
│ │ └── index.json
│ │ └── index.wxml
│ │ └── index.wxss
│ ├── navigationStyle   引入自定義導航欄的頁面(單獨配置了navigationStyle)
│ │ └── navigationStyle.js
│ │ └── navigationStyle.json
│ │ └── navigationStyle.wxml
│ │ └── navigationStyle.wxss
│ │ └── testPage.js   路由測試頁面(后面用來測試跳轉(zhuǎn)顯示不同膠囊按鈕)
│ │ └── testPage.json
│ │ └── testPage.wxml
│ │ └── testPage.wxss

App({
 onLaunch: function (options) {
  // 這里省略掉了登錄和獲取用戶信息等函數(shù)
  // 因為我在別的頁面也需要使用此信息，所以沒有單獨獲得 statusBarHeight
  wx.getSystemInfo({ // 獲取設備信息
  success: (res) => {
   this.globalData.systeminfo = res
  },
  })
  // 獲得膠囊按鈕位置信息
  this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
 },
 globalData: {
  systeminfo: {}, // 系統(tǒng)信息
  headerBtnPosi: {} // 膠囊按鈕位置信息
 }
})

<!-- 自定義導航欄 -->
<view class='navbar-wrap' 
 style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'> 
 <view class="navbar-text"
 style='line-height:{{navbarBtn.height + navbarBtn.top}}px;'>
 {{navbarData.title ? navbarData.title : "默認標題"}}{{navbarHeight}}
 </view>
 <view class="navbar-icon"
 wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'
 style="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;"> 
  <image wx:if='{{haveBack}}' bindtap="_goBack" class="floatL" src="/img/navbar_back_white.png"></image>  
  <view wx:if='{{haveBack}}' class="floatL"></view>
  <image bindtap="_goHome" src="/img/navbar_home_white.png"></image>
 </view>
</view>
<!-- 手寫loading -->
<view class="navbar-loading" style='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'>
 <text>...</text>
</view>

const app = getApp();
Component({
 properties: {
 navbarData: { // 由父頁面?zhèn)鬟f的數(shù)據(jù)
  type: Object,
  value: {},
  observer: function (newVal, oldVal) { }
 }
 },
 data: {
 haveBack: true, // 是否有返回按鈕，true 有 false 沒有 若從分享頁進入則為 false
 statusBarHeight: 0, // 狀態(tài)欄高度
 navbarHeight: 0, // 頂部導航欄高度
 navbarBtn: { // 膠囊位置信息
  height: 0,
  width: 0,
  top: 0,
  bottom: 0,
  right: 0
 }
 },
 // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()獲得膠囊按鈕高度
 attached: function () {
 let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 狀態(tài)欄高度
 let headerPosi = app.globalData.headerBtnPosi // 膠囊位置信息
 /**
  * wx.getMenuButtonBoundingClientRect() 坐標信息以屏幕左上角為原點
  * 菜單按鍵寬度： 87
  * 菜單按鍵高度： 32
  * 菜單按鍵左邊界坐標： 278
  * 菜單按鍵上邊界坐標： 26
  * 菜單按鍵右邊界坐標： 365
  * 菜單按鍵下邊界坐標： 58
  */
 let btnPosi = { // 膠囊實際位置，坐標信息不是左上角原點
  height: headerPosi.height,
  width: headerPosi.width,
  // 膠囊top - 狀態(tài)欄高度
  top: headerPosi.top - statusBarHeight,
  // 膠囊bottom - 膠囊height - 狀態(tài)欄height （現(xiàn)膠囊bottom 為距離導航欄底部的長度）
  bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  // 屏幕寬度 - 膠囊right
  right: app.globalData.systeminfo.screenWidth - headerPosi.right
 }
 let haveBack;
 if (getCurrentPages().length === 1) { // 當只有一個頁面時
  haveBack = false;
 } else {
  haveBack = true;
 }
 this.setData({
  haveBack: haveBack, // 獲取是否是通過分享進入的小程序
  statusBarHeight: statusBarHeight,
  navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原膠囊bottom + 現(xiàn)膠囊bottom
  navbarBtn: btnPosi
 })
 },
 methods: {
 _goBack: function () {
  wx.navigateBack({
  delta: 1
  });
 },
 _goHome: function () {
  wx.switchTab({
  url: '/pages/index/index',
  });
 }
 }
})

.navbar-wrap {
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 9999999;
 background-color: #3281FF;
 box-sizing: border-box;
}
.navbar-text {
 text-align: center;
 font-size: 36rpx;
 color: #fff;
 font-weight: 600;
}
.navbar-icon {
 position: fixed;
 display: flex;
 border-radius: 64rpx;
 border: 0.5px solid rgba(255,255,255, 0.3);
 box-sizing: border-box;
}
.navbar-icon image {
 height: 20px;
 width: 20px;
 padding: 5px 10px 10px;
 display: inline-block;
 overflow: hidden;
}
.navbar-icon view {
 height: 18px;
 border-left: 0.5px solid rgba(255,255,255, 0.3);
 margin-top: 6px;
}
.navbar-loading {
 background: #fff;
 text-align: center;
}

{
 "navigationStyle": "custom", 
 "enablePullDownRefresh": true, 
 "backgroundTextStyle": "light", 
 "usingComponents": {
  "headerNavbar": "/components/headerNavbar/headerNavbar"
 }
}

<headernavbar navbar-data="{{nvabarData}}"></headernavbar> 
<view class="home-page"> 
 <text>
 上面是自定義導航欄↑↑↑
 </text> 
 <text>
 下面是主體內(nèi)容↓↓↓
 </text> 
 <navigator url="./testPage">
 跳轉(zhuǎn)到測試頁
 </navigator> 
</view>

Page({
 data: {
  // 組件所需的參數(shù)
  nvabarData: {
   showCapsule: 1,
   // 是否顯示左上角膠囊按鈕 1 顯示 0 不顯示
   title: '組件列表' // 導航欄 中間的標題
  }
 },
 onPullDownRefresh() {
  setTimeout(() = >{
   wx.stopPullDownRefresh(); // 停止下拉
  },
  2000);
 },
})