├── .gitignore
├── README.md
├── app.js
├── app.json
├── components
    └── navbar
    │   ├── img
    │       ├── back.svg
    │       └── home.svg
    │   ├── navbar.js
    │   ├── navbar.json
    │   ├── navbar.wxml
    │   └── navbar.wxss
├── index
    ├── index.js
    ├── index.json
    ├── index.wxml
    └── index.wxss
├── project.config.json
├── screenshot
    ├── navbar_1.png
    ├── navbar_2.png
    └── navbar_3.png
└── sitemap.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center" style="margin-bottom: 20px;">微信小程序自定义导航栏（wx_custom_navigation_bar）</h1>
 2 | <h2 align="center">可选择返回键、首页键，动态设置标题，响应式组件</h2>
 3 | <p align="center"><code>版本号：1.0.0</code></p>
 4 | <p align="center">作者：chen-yt</p>
 5 | 
 6 | ## 截图
 7 | <img src="./screenshot/navbar_1.png" width="24%"></img>
 8 | <img src="./screenshot/navbar_2.png" width="24%"></img>
 9 | <img src="./screenshot/navbar_3.png" width="24%"></img>
10 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 |   onLaunch() {
3 |     console.log('微信小程序自定义导航栏：https://github.com/chen-yt/wx_custom_navigation_bar')
4 |   }
5 | })
6 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages": [
 3 |     "index/index"
 4 |   ],
 5 |   "window": {
 6 |     "backgroundTextStyle": "light",
 7 |     "navigationStyle": "custom"
 8 |   },
 9 |   "sitemapLocation": "sitemap.json"
10 | }


--------------------------------------------------------------------------------
/components/navbar/img/back.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540514023795" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4023" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M255.72 511.99 250.279 517.451 686.469 953.646 773.721 866.412 419.317 511.99 773.721 157.608 686.469 70.354 250.279 506.568Z" p-id="4024" fill="#ffffff"></path></svg>


--------------------------------------------------------------------------------
/components/navbar/img/home.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540457304379" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3410" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M798.69952 968.506368l52.590592 0c16.816128 0 30.445568-13.630464 30.445568-30.445568l-0.016384-0.119808c0 0 0-139.549696 0-164.921344 0-25.375744 0-251.107328 0-251.107328 0-18.214912 12.729344-31.31392 32.606208-33.042432l0.098304-0.028672c20.436992-1.835008 32.985088-14.76608 32.985088-32.985088 0-8.296448-3.06176-15.87712-8.119296-21.671936L528.402432 75.98592c0 0-11.93472-10.326016-23.750656 0L93.763584 434.184192c-5.057536 5.794816-8.119296 13.375488-8.119296 21.671936 0 18.219008 14.76608 32.985088 32.985088 32.985088 0 0 33.026048-1.180672 32.705536 33.071104 0 0 0 225.731584 0 251.107328 0 25.371648 0 164.921344 0 164.921344l-0.02048 0.119808c0 16.816128 13.63456 30.445568 30.449664 30.445568l229.994496 0c0 0 32.002048 0.049152 32.002048-36.104192L443.76064 816.832512c0 0-8.6016-60.332032 65.629184-63.632384 0 0 78.983168-7.169024 79.904768 63.632384l0 115.569664c0 36.154368 32.006144 36.104192 32.006144 36.104192l63.917056 0 92.913664-0.111616L798.69952 968.506368z" p-id="3411" fill="#ffffff" class="selected"></path></svg>


--------------------------------------------------------------------------------
/components/navbar/navbar.js:
--------------------------------------------------------------------------------
 1 | const navBarHeight = wx.getSystemInfoSync().statusBarHeight + 44
 2 | 
 3 | Component({
 4 | 
 5 |   properties: {
 6 |     back: {
 7 |       type: Boolean,
 8 |       value: false
 9 |     },
10 |     home: {
11 |       type: Boolean,
12 |       value: false
13 |     },
14 |     title: {
15 |       type: String,
16 |       value: 'Wechat'
17 |     },
18 |     titleColor: {
19 |       type: String,
20 |       value: '#ffffff'
21 |     },
22 |     background: {
23 |       type: String,
24 |       value: '#2f2f2f'
25 |     }
26 |   },
27 | 
28 |   data: {
29 |     navBarHeight
30 |   },
31 | 
32 |   methods: {
33 |     home() {
34 |       this.triggerEvent('home')
35 |       wx.reLaunch({
36 |         url: '/index/index'
37 |       })
38 |     },
39 | 
40 |     back() {
41 |       this.triggerEvent('back')
42 |       if (getCurrentPages().length === 1) {
43 |         wx.redirectTo({
44 |           url: '/index/index'
45 |         })
46 |       } else {
47 |         wx.navigateBack()
48 |       }
49 |     }
50 |   }
51 | })
52 | 


--------------------------------------------------------------------------------
/components/navbar/navbar.json:
--------------------------------------------------------------------------------
1 | {
2 |   "component": true
3 | }


--------------------------------------------------------------------------------
/components/navbar/navbar.wxml:
--------------------------------------------------------------------------------
 1 | <view
 2 |   class="navbar"
 3 |   style="height: {{navBarHeight}}px;background: {{background}};color: {{titleColor}};"
 4 | >
 5 |   <view class='title'>{{title}}</view>
 6 | 
 7 |   <view class='capsule'>
 8 |     <image
 9 |       wx:if="{{back}}"
10 |       bindtap='back'
11 |       mode="aspectFit"
12 |       src='img/back.svg'
13 |     ></image>
14 | 
15 |     <image
16 |       wx:if="{{home}}"
17 |       bindtap='home'
18 |       mode="aspectFit"
19 |       src='img/home.svg'
20 |     ></image>
21 |   </view>
22 | </view>
23 | 
24 | <view
25 |   class="page"
26 |   style="top: {{navBarHeight}}px;"
27 | >
28 |   <slot></slot>
29 | </view>


--------------------------------------------------------------------------------
/components/navbar/navbar.wxss:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |   position: fixed;
 3 |   left: 0;
 4 |   right: 0;
 5 |   top: 0;
 6 |   z-index: 10;
 7 | }
 8 | 
 9 | .title {
10 |   position: absolute;
11 |   bottom: 22px;
12 |   left: 104px;
13 |   right: 104px;
14 |   transform: translateY(50%);
15 |   font-size: 14px;
16 |   text-align: center;
17 |   overflow: hidden;
18 |   text-overflow: ellipsis;
19 |   white-space: nowrap;
20 | }
21 | 
22 | .capsule {
23 |   position: absolute;
24 |   left: 16px;
25 |   bottom: 22px;
26 |   transform: translateY(50%);
27 |   height: 32px;
28 |   display: flex;
29 |   align-items: center;
30 | }
31 | 
32 | .capsule > image {
33 |   width: 20px;
34 |   height: 20px;
35 | }
36 | 
37 | .capsule > image:nth-child(2) {
38 |   margin-left: 12px;
39 | }
40 | 
41 | .page {
42 |   position: fixed;
43 |   left: 0;
44 |   right: 0;
45 |   bottom: 0;
46 | }


--------------------------------------------------------------------------------
/index/index.js:
--------------------------------------------------------------------------------
 1 | const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
 2 | 
 3 | Page({
 4 |   data: {
 5 |     isShowBack: true,
 6 |     isShowHome: true,
 7 |     title: '小程序自定义导航栏',
 8 |     titleColor: '#ffffff',
 9 |     background: 'linear-gradient(135deg, #33B3F3 0%, #2070DC 100%)'
10 |   },
11 |   
12 |   onBack() {
13 |     console.log('导航栏被点击返回')
14 |   },
15 | 
16 |   onHome() {
17 |     console.log('导航栏被点击首页')
18 |   },
19 | 
20 |   changeTitle() {
21 |     this.setData({
22 |       title: '标题很长，溢出自动隐藏～'
23 |     })
24 |   },
25 | 
26 |   changeBackground() {
27 |     this.setData({
28 |       background: '#2f2f2f'
29 |     })
30 |   },
31 | 
32 |   changeColor() {
33 |     this.setData({
34 |       titleColor: 'blue'
35 |     })
36 |   },
37 | 
38 |   changeBackBtn() {
39 |     this.setData({
40 |       isShowBack: !this.data.isShowBack
41 |     })
42 |   },
43 | 
44 |   changeHomeBtn() {
45 |     this.setData({
46 |       isShowHome: !this.data.isShowHome
47 |     })
48 |   }
49 | })
50 | 


--------------------------------------------------------------------------------
/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 |   "usingComponents": {
3 |     "navbar": "../../components/navbar/navbar"
4 |   },
5 |   "disableScroll": true
6 | }


--------------------------------------------------------------------------------
/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <navbar
 2 |   back="{{isShowBack}}"
 3 |   home="{{isShowHome}}"
 4 |   title="{{title}}"
 5 |   titleColor="{{titleColor}}"
 6 |   background="{{background}}"
 7 |   bindback="onBack"
 8 |   bindhome="onHome"
 9 | >
10 |   <button bindtap="changeTitle">点我改变标题</button>
11 |   <button bindtap="changeBackground">点我改变导航栏颜色</button>
12 |   <button bindtap="changeColor">点我改变标题颜色</button>
13 |   <button bindtap="changeBackBtn">点我{{isShowBack ? '隐藏' : '显示'}}返回键</button>
14 |   <button bindtap="changeHomeBtn">点我{{isShowHome ? '隐藏' : '显示'}}home键</button>
15 | </navbar>


--------------------------------------------------------------------------------
/index/index.wxss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yt/wx_custom_navigation_bar/fa3c24d38e93cf8564f2c9fa4f2df41705f95050/index/index.wxss


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"description": "项目配置文件",
 3 | 	"packOptions": {
 4 | 		"ignore": []
 5 | 	},
 6 | 	"setting": {
 7 | 		"urlCheck": true,
 8 | 		"es6": true,
 9 | 		"postcss": true,
10 | 		"minified": true,
11 | 		"newFeature": true
12 | 	},
13 | 	"compileType": "miniprogram",
14 | 	"libVersion": "2.3.2",
15 | 	"appid": "wxb36c11bb08b72a15",
16 | 	"projectname": "navigation_bar",
17 | 	"debugOptions": {
18 | 		"hidedInDevtools": []
19 | 	},
20 | 	"isGameTourist": false,
21 | 	"simulatorType": "wechat",
22 | 	"simulatorPluginLibVersion": {},
23 | 	"condition": {
24 | 		"search": {
25 | 			"current": -1,
26 | 			"list": []
27 | 		},
28 | 		"conversation": {
29 | 			"current": -1,
30 | 			"list": []
31 | 		},
32 | 		"game": {
33 | 			"currentL": -1,
34 | 			"list": []
35 | 		},
36 | 		"miniprogram": {
37 | 			"current": -1,
38 | 			"list": []
39 | 		}
40 | 	}
41 | }


--------------------------------------------------------------------------------
/screenshot/navbar_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yt/wx_custom_navigation_bar/fa3c24d38e93cf8564f2c9fa4f2df41705f95050/screenshot/navbar_1.png


--------------------------------------------------------------------------------
/screenshot/navbar_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yt/wx_custom_navigation_bar/fa3c24d38e93cf8564f2c9fa4f2df41705f95050/screenshot/navbar_2.png


--------------------------------------------------------------------------------
/screenshot/navbar_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yt/wx_custom_navigation_bar/fa3c24d38e93cf8564f2c9fa4f2df41705f95050/screenshot/navbar_3.png


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


--------------------------------------------------------------------------------