2.0.0

1. 增加导航栏背景色、标题颜色参数;
2. 增加导航栏按钮监听事件;
3. 增加组件slot，可将页面直接嵌入组件;
4. 优化获取导航栏参数逻辑，提高组件性能;
5. 增加页面栈只有一页时，点击返回键可返回主页功能;
6. 优化组件样式;

.gitignore

@@ -0,0 +1 @@
+.DS_Store

app.js

@@ -1,10 +1,5 @@
 App({
-  onLaunch: function () {
-    wx.getSystemInfo({
-      success: res => {
-        this.statusBarHeight = res.statusBarHeight
-      }
-    })
-  },
-  statusBarHeight: 0
+  onLaunch() {
+    console.log('微信小程序自定义导航栏：https://github.com/chen-yt/wx_custom_navigation_bar')
+  }
 })

app.json

@@ -1,9 +1,10 @@
 {
-  "pages":[
+  "pages": [
     "index/index"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationStyle": "custom"
-  }
-}
+  },
+  "sitemapLocation": "sitemap.json"
+}

components/navbar/navbar.js

@@ -1,37 +1,51 @@
-const app = getApp()
+const navBarHeight = wx.getSystemInfoSync().statusBarHeight + 44
 
 Component({
 
   properties: {
-    text: {
-      type: String,
-      value: 'Wechat'
-    },
     back: {
       type: Boolean,
       value: false
     },
     home: {
       type: Boolean,
       value: false
+    },
+    title: {
+      type: String,
+      value: 'Wechat'
+    },
+    titleColor: {
+      type: String,
+      value: '#ffffff'
+    },
+    background: {
+      type: String,
+      value: '#2f2f2f'
     }
   },
 
   data: {
-    statusBarHeight: app.statusBarHeight + 'px',
-    navigationBarHeight: (app.statusBarHeight + 44) + 'px'
+    navBarHeight
   },
 
   methods: {
-    backHome: function () {
+    home() {
+      this.triggerEvent('home')
       wx.reLaunch({
-        url: '../index/index',
+        url: '/index/index'
       })
     },
-    back: function () {
-      wx.navigateBack({
-        delta: 1
-      })
+
+    back() {
+      this.triggerEvent('back')
+      if (getCurrentPages().length === 1) {
+        wx.redirectTo({
+          url: '/index/index'
+        })
+      } else {
+        wx.navigateBack()
+      }
     }
   }
 })

components/navbar/navbar.wxml

@@ -1,14 +1,29 @@
-<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
-  <view style="{{'height: ' + statusBarHeight}}"></view>
-  <view class='title-container'>
-    <view class='capsule' wx:if="{{ back || home }}">
-      <view bindtap='back' wx:if="{{back}}">
-        <image src='img/back.svg'></image>            
-      </view>
-      <view bindtap='backHome' wx:if="{{home}}">
-        <image src='img/home.svg'></image>
-      </view>
-    </view>
-    <view class='title'>{{text}}</view>
+<view
+  class="navbar"
+  style="height: {{navBarHeight}}px;background: {{background}};color: {{titleColor}};"
+>
+  <view class='title'>{{title}}</view>
+
+  <view class='capsule'>
+    <image
+      wx:if="{{back}}"
+      bindtap='back'
+      mode="aspectFit"
+      src='img/back.svg'
+    ></image>
+
+    <image
+      wx:if="{{home}}"
+      bindtap='home'
+      mode="aspectFit"
+      src='img/home.svg'
+    ></image>
   </view>
+</view>
+
+<view
+  class="page"
+  style="top: {{navBarHeight}}px;"
+>
+  <slot></slot>
 </view>

components/navbar/navbar.wxss

@@ -1,53 +1,46 @@
 .navbar {
-  width: 100vw;
-  background-color: #2f2f2f;
   position: fixed;
-  z-index: 4;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 10;
 }
 
-.title-container {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  position: relative;
+.title {
+  position: absolute;
+  bottom: 22px;
+  left: 104px;
+  right: 104px;
+  transform: translateY(50%);
+  font-size: 14px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .capsule {
-  margin-left: 10px;
+  position: absolute;
+  left: 16px;
+  bottom: 22px;
+  transform: translateY(50%);
   height: 32px;
-  border: 1px solid #777;
-  border-radius: 16px;
   display: flex;
   align-items: center;
 }
 
-.capsule > view {
-  width: 32px;
-  height: 60%;
-  position: relative;
+.capsule > image {
+  width: 20px;
+  height: 20px;
 }
 
-.capsule > view:nth-child(2) {
-  border-left: 1px solid #777;  
+.capsule > image:nth-child(2) {
+  margin-left: 12px;
 }
 
-.capsule image {
-  width: 60%;
-  height: 100%;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%,-50%);
-}
-
-.title {
-  color: white;
-  position: absolute;
-  left: 104px;
-  right: 104px;
-  font-size: 14px;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.page {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }

index/index.js

@@ -2,10 +2,48 @@ const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
 
 Page({
   data: {
-    navigationBarTitle: 'Custom Navigation Bar',
-    navigationBarHeight
+    isShowBack: true,
+    isShowHome: true,
+    title: '小程序自定义导航栏',
+    titleColor: '#ffffff',
+    background: 'linear-gradient(135deg, #33B3F3 0%, #2070DC 100%)'
   },
-  onLoad: function () {
-
+
+  onBack() {
+    console.log('导航栏被点击返回')
   },
+
+  onHome() {
+    console.log('导航栏被点击首页')
+  },
+
+  changeTitle() {
+    this.setData({
+      title: '标题很长，溢出自动隐藏～'
+    })
+  },
+
+  changeBackground() {
+    this.setData({
+      background: '#2f2f2f'
+    })
+  },
+
+  changeColor() {
+    this.setData({
+      titleColor: 'blue'
+    })
+  },
+
+  changeBackBtn() {
+    this.setData({
+      isShowBack: !this.data.isShowBack
+    })
+  },
+
+  changeHomeBtn() {
+    this.setData({
+      isShowHome: !this.data.isShowHome
+    })
+  }
 })

index/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "navbar": "../..//components/navbar/navbar"
-  }
+    "navbar": "../../components/navbar/navbar"
+  },
+  "disableScroll": true
 }

index/index.wxml

@@ -1,5 +1,15 @@
-<navbar back home text="{{navigationBarTitle}}"></navbar>
-
-<view class='main' style="{{'top:' + navigationBarHeight}}">
-  <text>Hello Wechat!</text>
-</view>
+<navbar
+  back="{{isShowBack}}"
+  home="{{isShowHome}}"
+  title="{{title}}"
+  titleColor="{{titleColor}}"
+  background="{{background}}"
+  bindback="onBack"
+  bindhome="onHome"
+>
+  <button bindtap="changeTitle">点我改变标题</button>
+  <button bindtap="changeBackground">点我改变导航栏颜色</button>
+  <button bindtap="changeColor">点我改变标题颜色</button>
+  <button bindtap="changeBackBtn">点我{{isShowBack ? '隐藏' : '显示'}}返回键</button>
+  <button bindtap="changeHomeBtn">点我{{isShowHome ? '隐藏' : '显示'}}home键</button>
+</navbar>

index/index.wxss

@@ -1,3 +0,0 @@
-.main {
-  position: absolute;
-}

project.config.json

@@ -18,6 +18,8 @@
 		"hidedInDevtools": []
 	},
 	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
 	"condition": {
 		"search": {
 			"current": -1,

sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}