├── example ├── child.wxss ├── index.wxss ├── index.json ├── child.json ├── index.js ├── child.wxml ├── index.wxml └── child.js ├── components └── navigationBar │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── assets ├── example1.gif ├── example2.gif ├── example3.gif ├── example4.gif ├── example5.gif ├── example6.gif ├── example7.gif ├── example8.gif └── example9.gif ├── app.js ├── sitemap.json ├── app.wxss ├── app.json ├── CHANGELOG.md ├── project.config.json └── README.md /example/child.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navigationBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /example/index.wxss: -------------------------------------------------------------------------------- 1 | /* src/pages/xml2can/xml2can.wxss */ 2 | 3 | -------------------------------------------------------------------------------- /assets/example1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example1.gif -------------------------------------------------------------------------------- /assets/example2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example2.gif -------------------------------------------------------------------------------- /assets/example3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example3.gif -------------------------------------------------------------------------------- /assets/example4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example4.gif -------------------------------------------------------------------------------- /assets/example5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example5.gif -------------------------------------------------------------------------------- /assets/example6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example6.gif -------------------------------------------------------------------------------- /assets/example7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example7.gif -------------------------------------------------------------------------------- /assets/example8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example8.gif -------------------------------------------------------------------------------- /assets/example9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mulook/weapp-navigation-bar/HEAD/assets/example9.gif -------------------------------------------------------------------------------- /example/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents":{ 3 | "navigationBar":"/components/navigationBar/index" 4 | } 5 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | 5 | }, 6 | globalData: { 7 | userInfo: null 8 | } 9 | }) -------------------------------------------------------------------------------- /example/child.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents":{ 3 | "navigationBar":"/components/navigationBar/index" 4 | }, 5 | "disableSwipeBack": true 6 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | #container { 3 | position: relative; 4 | width: 100%; 5 | min-height: 100vh; 6 | background-color: #ffffff; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | } -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | /** 3 | * 页面的初始数据 4 | */ 5 | data: { 6 | title: '标题', 7 | barBg: '#f8f8f8',//#ff6600 8 | color: '#000000'//#ffffff 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面初次渲染完成 13 | */ 14 | onReady: function () { 15 | 16 | }, 17 | shareEnter(){ 18 | wx.reLaunch({url:'/example/child?title=从分享进入'}) 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "example/index", 4 | "example/child" 5 | ], 6 | "window": { 7 | "navigationStyle": "custom", 8 | "backgroundTextStyle": "light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "自定义导航栏", 11 | "navigationBarTextStyle": "black" 12 | }, 13 | "debug": true, 14 | "sitemapLocation": "sitemap.json" 15 | } -------------------------------------------------------------------------------- /example/child.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 页面容器 5 | 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # weapp-navigation-bar 2 | ## v1.1.0 3 | 1. 增加normal风格的返回按钮，旧版本的定义为simple风格，支持两种风格切换。 4 | 2. 点击返回按钮和点击首页按钮，支持在外部绑定事件,使用方法，请参考example。[ISSUE #6](https://github.com/mulook/weapp-navigation-bar/issues/6) 5 | ## v1.0.2 6 | 1. 修复安卓系统下，页面滚动指定距离，切换导航栏隐藏不全的问题。[ISSUE #3](https://github.com/mulook/weapp-navigation-bar/issues/3) 7 | ## v1.0.1 8 | 1. 新增支持页面滚动指定距离，切换导航栏的显示或隐藏。[ISSUE #1](https://github.com/mulook/weapp-navigation-bar/issues/1) 9 | ## v1.0.0 10 | 1. 可根据手机状态栏高度适配。 11 | 2. 可自定义设置包括字体颜色、字体大小、背景颜色、无标题、导航栏是否置顶。 12 | 3. 可自动识别是否首页launch。 -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "1.9.95", 15 | "appid": "wx526a786b7e5f0a7c", 16 | "projectname": "%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F", 17 | "isGameTourist": false, 18 | "simulatorType": "wechat", 19 | "simulatorPluginLibVersion": {}, 20 | "condition": { 21 | "search": { 22 | "current": -1, 23 | "list": [] 24 | }, 25 | "conversation": { 26 | "current": -1, 27 | "list": [] 28 | }, 29 | "plugin": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "game": { 34 | "currentL": -1, 35 | "list": [] 36 | }, 37 | "miniprogram": { 38 | "current": -1, 39 | "list": [] 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /example/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 页面容器 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/navigationBar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 首页 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{title!='none'?title:''}} 14 | 15 | -------------------------------------------------------------------------------- /example/child.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | /** 3 | * 页面的初始数据 4 | */ 5 | data: { 6 | title: '子页面', 7 | barBg: '#f8f8f8',//#ff6600 8 | fixed: true, 9 | color: '#000000',//#ffffff 10 | touchStartY: 0,//触摸开始的Y坐标 11 | toggleBarShow: false, 12 | backStyle: 'normal', 13 | backEvent: false, 14 | backHomeEvent: false 15 | }, 16 | onLoad: function (options) { 17 | console.log(options); 18 | var obj = {}; 19 | console.log(obj); 20 | if(options.title){ 21 | obj.title = options.title 22 | } 23 | if(options.nofixed){ 24 | obj.fixed = false 25 | } 26 | if(options.toggleBarShow){ 27 | obj.toggleBarShow = true; 28 | } 29 | if (options.backStyle) { 30 | obj.backStyle = options.backStyle; 31 | } 32 | if (options.backHomeEvent) { 33 | obj.backHomeEvent = true; 34 | } 35 | if (options.backEvent) { 36 | obj.backEvent = true; 37 | } 38 | this.setData(obj); 39 | }, 40 | /** 41 | * 生命周期函数--监听页面初次渲染完成 42 | */ 43 | onReady: function () { 44 | 45 | }, 46 | touchstart(e) { 47 | // this.data.touchStartY = e.changedTouches[0].clientY; 48 | this.setData({ touchStartY: e.changedTouches[0].clientY }); 49 | }, 50 | touchmove(e) { 51 | if(!this.data.toggleBarShow){ 52 | return; 53 | } 54 | console.log(this.data.touchStartY - e.changedTouches[0].clientY, e.changedTouches[0].clientY); 55 | if ((e.changedTouches[0].clientY - this.data.touchStartY) > 0 && (e.changedTouches[0].clientY - this.data.touchStartY) > 3) {//向上滚动 56 | this.selectComponent("#navigationBar").toggleShow(); 57 | } 58 | if ((e.changedTouches[0].clientY - this.data.touchStartY) < 0 && (this.data.touchStartY - e.changedTouches[0].clientY) > 30) {//向下滚动 59 | this.selectComponent("#navigationBar").toggleHide(); 60 | } 61 | }, 62 | onPageScroll(e){ 63 | // console.log(e.scrollTop, e.scrollTop - this.data.touchStartY); 64 | if (e.scrollTop < 10) {//判断向上滚动顶部 65 | // this.setData({ touchStartY: e.scrollTop }); 66 | this.selectComponent("#navigationBar").toggleShow(); 67 | } 68 | 69 | }, 70 | onShareAppMessage(res){ 71 | return { 72 | title: '分享标题', 73 | path: '/exmaple/child?title=来自分享页' 74 | } 75 | }, 76 | /** 77 | * 返回按钮触发事件 78 | * @param {Object} e 事件对象 79 | */ 80 | backEvent(e){ 81 | // 这里可以写点击返回按钮相关的业务逻辑，下面逻辑提供参考 82 | let self = this; 83 | wx.showModal({ 84 | title: '提示，触发返回按钮事件', 85 | content: '确定要退出当前页面吗？', 86 | success(res) { 87 | res.confirm && self.selectComponent('#navigationBar').runBack();//这里之所以调用了组件内部的返回上一页的方法，因为里面有判断逻辑，不想调用可以自行处理 88 | } 89 | }) 90 | }, 91 | /** 92 | * 返回按钮触发事件 93 | * @param {Object} e 事件对象 94 | */ 95 | backHomeEvent(e) { 96 | // 这里可以写点击返回首页按钮相关的业务逻辑，下面逻辑提供参考 97 | let self = this; 98 | wx.showModal({ 99 | title: '提示，触发返回首页按钮事件', 100 | content: '确定要退出当前页面吗？', 101 | success(res) { 102 | res.confirm && self.selectComponent('#navigationBar').runBackHome();//这里之所以调用了组件内部的返回首页的方法，因为里面有判断逻辑，不想调用可以自行处理 103 | } 104 | }) 105 | } 106 | }); 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # weapp-navigation-bar 2 | 3 | 因为小程序原生导航栏的一些限制，比如：不能设置字体大小，ios标题居中而安卓居左，从非首页启动小程序返回首页菜单不明显，屏幕空间不能最大化使用。因此微信开放了小程序自定义导航栏，允许用户最大化的使用屏幕空间。但是自定导航栏不支持只指定某些页面使用，而是全局的，所以也带来了一些适配问题。 4 | ## 本导航栏组件支持 5 | 1. 可根据手机状态栏高度适配。 6 | 2. 可自定义设置包括字体颜色、字体大小、背景颜色、无标题、导航栏是否置顶。 7 | 3. 可自动识别是否首页launch。 8 | 4. 更多请[查看组件更新内容](https://github.com/mulook/weapp-navigation-bar/blob/master/CHANGELOG.md) 9 | 10 | ## 演示 11 | 1 自定义导航栏 12 | 13 | 14 | 15 | 16 | 2 模拟非首页启动小程序 17 | 18 | 19 | 20 | 3 设置导航栏跟随页面滚动 21 | 22 | 23 | 24 | 4 页面上下滚动指定像素值，切换导航栏的显示或隐藏 25 | 26 | 27 | 28 | 5 绑定返回按钮事件 29 | 30 | 31 | 6 绑定返回首页按钮事件 32 | 33 | 34 | 35 | ## 使用说明 36 | 使用前需要了解[小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)和[自定义导航栏](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#window)。 37 | app.json配置以下属性 38 | ``` json 39 | "window":{ 40 | "navigationStyle": "custom", 41 | "backgroundTextStyle":"light", 42 | "navigationBarBackgroundColor": "#fff", 43 | "navigationBarTitleText": "自定义导航栏", 44 | "navigationBarTextStyle":"white" 45 | } 46 | ``` 47 | 如果已了解，可直接把组件拷贝到项目里引用，用法可参考example。 48 | > 额外说明：小程序右上角胶囊颜色，可通过navigationBarTextStyle设置，支持black和white。 49 | > 为了提高兼容性，建议把所有页面内容写在设置的页面容器里，参考example。 50 | ## 组件内部自定义方法 51 | > toggleShow()/toggleHide()用于切换自定义导航栏的显示/隐藏。 52 | ## 组件自定义属性说明 53 | | 属性 | 说明 | 类型 | 默认值 | 54 | | ------------- | --------------------------- | ------- | ----------- | 55 | | title | 标题 | String | none | 56 | | color | 标题字体颜色 | String | #000000 | 57 | | fontSize | 导航栏字体大小，单位rpx、px | String | 16px | 58 | | background | 导航栏背景颜色 | String | #ffffff | 59 | | placeholderBg | 导航栏占位栏背景色 | String | transparent | 60 | | back | 是否显示导航栏返回按钮 | Boolean | false | 61 | | fixed | 导航栏是否fixed定位置顶 | Boolean | true | 62 | | backStyle | 导航栏返回按钮的风格支持simple和normal| String | normal | 63 | | backEvent | 是否绑定返回按钮事件 | Boolean | false | 64 | | backHomeEvent | 是否绑定返回首页按钮事件 | Boolean | false | 65 | ## 组件外部绑定事件说明 66 | > 绑定事件前，先打开事件监听属性backEvent="{{true}}"，然后使用bind:事件名="callback"来绑定回调函数 67 | 68 | | 事件名 | 说明 | 事件是否冒泡 | 事件是否拥有捕获阶段 | 69 | | ------------- | --------------------------- | ------- | ----------- | 70 | | back | 返回按钮被点击 | 否 | 否 | 71 | | backHome | 返回首页按钮被点击 | 否 | 否 | 72 | 73 | >绑定事件参考 74 | 75 | >wxml 76 | ``` html 77 | 78 | ``` 79 | >js 80 | ``` js 81 | Page({ 82 | /** 83 | * 返回按钮触发事件 84 | * @param {Object} e 事件对象 85 | */ 86 | backEvent(e){ 87 | // 这里可以写点击返回按钮相关的业务逻辑，下面逻辑提供参考 88 | let self = this; 89 | wx.showModal({ 90 | title: '提示，触发返回按钮事件', 91 | content: '确定要退出当前页面吗？', 92 | success(res) { 93 | res.confirm && self.selectComponent('#navigationBar').runBack();//这里之所以调用了组件内部的返回上一页的方法，因为里面有判断逻辑，不想调用可以自行处理 94 | } 95 | }) 96 | }, 97 | /** 98 | * 返回按钮触发事件 99 | * @param {Object} e 事件对象 100 | */ 101 | backHomeEvent(e) { 102 | // 这里可以写点击返回首页按钮相关的业务逻辑，下面逻辑提供参考 103 | let self = this; 104 | wx.showModal({ 105 | title: '提示，触发返回首页按钮事件', 106 | content: '确定要退出当前页面吗？', 107 | success(res) { 108 | res.confirm && self.selectComponent('#navigationBar').runBackHome();//这里之所以调用了组件内部的返回首页的方法，因为里面有判断逻辑，不想调用可以自行处理 109 | } 110 | }) 111 | } 112 | }); 113 | 114 | ``` 115 | -------------------------------------------------------------------------------- /components/navigationBar/index.wxss: -------------------------------------------------------------------------------- 1 | .navigation-bar{ 2 | position: relative; 3 | left: 0; 4 | top: 0; 5 | width: 750rpx; 6 | color: #ffffff; 7 | background: #45b9e5; 8 | z-index: 99; 9 | text-align: center; 10 | transition: 300ms; 11 | } 12 | .back{ 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | min-width: 70rpx; 17 | display: flex; 18 | justify-content: flex-start; 19 | align-items: center; 20 | } 21 | .icon{ 22 | display: inline-block; 23 | font-family: 'iconfont' !important; 24 | speak: none; 25 | font-style: normal; 26 | font-weight: bold; 27 | font-variant: normal; 28 | text-transform: none; 29 | text-rendering: auto; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | vertical-align: middle; 33 | font-size: 38rpx; 34 | } 35 | .style-simple{ 36 | display: flex; 37 | margin-left: 16rpx; 38 | align-items: center; 39 | } 40 | .style-simple .icon-fanhui:before { content: "\e624";} 41 | .style-simple .back-home{ 42 | width: auto; 43 | text-align: center; 44 | font-size: 30rpx; 45 | } 46 | .black{ 47 | background: #ffffff; 48 | border-color:#e5e5e5 !important; 49 | } 50 | .white{ 51 | background: rgba(0, 0, 0, 0.15); 52 | border-color: rgba(255, 255, 255, 0.25) !important; 53 | } 54 | .style-normal{ 55 | border: 1rpx solid #ededed; 56 | border-radius: 32rpx; 57 | height: 64rpx; 58 | width: 176rpx; 59 | display: flex; 60 | margin-left: 16rpx; 61 | align-items: center; 62 | } 63 | .style-normal .icon-fanhui{ 64 | line-height: 64rpx; 65 | width: 87rpx; 66 | font-size: 44rpx; 67 | } 68 | .style-normal .icon-fanhui:before { content: "\e7eb";} 69 | .style-normal .back-home{ 70 | width: 87rpx; 71 | text-align: center; 72 | font-size: 44rpx; 73 | } 74 | .style-normal .back-home:before { content: "\e7c6";} 75 | .style-normal .split{ 76 | border-left: 1rpx solid #e5e5e5; 77 | height: 32rpx; 78 | width: 1rpx; 79 | } 80 | .title{ 81 | font-weight: bold; 82 | } 83 | .navigation-bar-holder{ 84 | background: transparent; 85 | position: relative; 86 | z-index: 2; 87 | } 88 | @font-face { 89 | font-family: 'iconfont'; 90 | src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOgAA0AAAAAB4QAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCYhEICoQsgzgLEAABNgIkAxYEIAWDDwdIGxgGUVRQUsg+EqrbejExJkZMFIeJQzwIETcn38XD0/74zp2Zhw8tgOhMpk0/L0N1dVPfbWBIanLaRuX3Y93by6CYlCumkE/QyZz9NZPCx8HSPnVP5sEtOYOzmAJ6qZ8/kLIogQKLKHqeZ8PnxwU20OFUh7wBdybxpIadEPDq0kITwLuhLyu5SyP0YwKQhFALBQlRxD8i6WJ6CJwFsuMrvzAlqTMOhgFb2bUnuhTgw7yPrzPtqNFMHUMAMjKmQWAULzCNYBXQr5UUub2MfLz48WvX4Xp38vtZhyZFzZoLCISKmoAlEpKfJwCbja6TQAMGUeMKngJQABBCFnNXTxOmVMzoLFWWA10xvUxV8biu64jNKNc0DbGZMmXRpDGlM+nhQ63H/fv0wQM8/ihD12YkaMo0RSH2230/7vJYwsabrid99zK/ZefcTiVeG4+/EqFOT1IUNDBN1VEGm6Z0lrtqqY3SzUBV4UAYc5Y8Ht80cxsrlRDO4CTEtkrS2GYAKUuyS1krYtoYZVbo9DJVR+2RZB3q617Seuzc4jPmlreXnDhsu14UlfJ4EbfaPtaBMwQsHz9rl0A+9z8W90Pw812doQnb00oaTtfWnX5Ve/pMXcPQoyVu7VMcSD9J5tC0adyK/PwnvyZ+PS9t/bdi18SumzEt/6+gL/Dk/btbJxXOFv1n7XT1Ti1wu/f4LAibPczYkrTPf9OWLbOda+x58MTmC3db1w13YtzM20amBExk1F2ve9Ies3TSes/Iarnn5NINhfV15dlZcO/ydt6/trlbcJgcRi2+/eJ2k1R5FvHV1nY8gECwZGHjwQLL8P8tLgbtvLCO5geZopVAMNA8F4D8oJtrpTD+BQp/lQvzA0JjNR4khMAqAOh3ToDQGgOBpLYYAtk8HRAoWjcFqPR5DoFa6xdelB5hGJCQ9JsK2SbeUAxbBZUJjlbVhr1kUKJWjXJObgKjLDkL1AFsV6aUQbNq8C80DWBDGlL/5AayMoQvT96IUKQsOmSMr0AeAnjw5c1HCHhpisspDXIZ8fX0JqGkTsLSfQM9Ajw2I7ahachuo0EjQ7BC+LSAhwOjex9P76xO0mg2t0FIkSJHiareU1SzqNlgtDQywjLBCLMCAA==) format('woff2'), 91 | url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAWoAA0AAAAAB4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFjAAAABoAAAAch8QPdUdERUYAAAVwAAAAHAAAAB4AJwANT1MvMgAAAaAAAABGAAAAVjz3Wr5jbWFwAAACAAAAAFAAAAFizgvTb2dhc3AAAAVoAAAACAAAAAj//wADZ2x5ZgAAAmAAAAHwAAACLBoXztpoZWFkAAABMAAAADAAAAA2FT8saWhoZWEAAAFgAAAAHQAAACQHowOFaG10eAAAAegAAAAVAAAAFg1eAS5sb2NhAAACUAAAABAAAAAQASYBtG1heHAAAAGAAAAAHgAAACAATABEbmFtZQAABFAAAADhAAABj76Bsdhwb3N0AAAFNAAAADQAAABIIIgIznjaY2BkYGAAYkf1Evl4fpuvDNwsDCBwk/+LGZy2/t/AfJS5AcjlYGACiQIAARIJ33jaY2BkYGBu+N/AEMPCAALMRxkYGVABCwBVlQMxAAAAeNpjYGRgYGBncGRgZgABJiBmZACJOYD5DAAJlACRAAB42mNgZGFg/MLAysDANJPpDAMDQz+EZnzNYMzICRRlYGNmgAMBBJMhIM01hYHhmcrz18wN/xsYYpgbGBqAwowgOQAVMQ1CAAB42mNhgAAWCP7MkMZgzfADAAsaApkAAAB42mNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkMzxTed7x/Njz1///g5Qh8yTvS9RI2EtIQ02AA0Y2BrgQIxOQYGJAU8Aw7AEAK6wTDwAAAAAAAAAAADoAngDsARZ42iWRv2tTURTH7/ee+yMvL7+eTfLSBFP7ogmYmsQ2yVPSPIJIHaSri0MFRRyTOAgdpDjoortkylRcpCBdLChE0ckxg4hj/QscFIQbb5QD93A453zPuZ/DwH4uDvgvOmABYw5SyGXzPsrY2ox4p11Dw74hInTa1Uqg+GdzPZ5MxfGeXCnjWsbMNS64xjuSGVcm6JHZdoJkej1ubpCUOi7dGN5yrYX1H4Ur3YxkDOz+4jtN6Dwb2EA3UAlSyC5ndsNutYmq0imuU9AqqDVQq9aq7TBCaJObft6aTeXXkO92wrZW9OJK7/Xd8Ww0/DB++nWDE10lBXCO4l40eD4oh4VWsVRKXii0+jaMmunkNkHQkVBwiB9t3Lw1nP2YjSb7ti0LIi4lRXv/W5pLhbXQXyoUW+lMkyuJOqQ4jnMwYr3FnD7RJVZia+zykp/dV2moXLYse/DWvX9faqPS2Qq9imVYR6DOouJV4IPemMdFlckoc2+FtOMmU7GL/LieLDhnzMPh8NvE96aeP7mDsY/beIYnRSXEsrik0wnXUWROsOM4Kx3z6su+OTn1fN87xQ5Gvjm0jH8zwef8D8tZxnZyYNfK+pZaH+2ag4jzubAS/UTCHsZR5iUecAI/3CXJzdQ555gpCbkbk1jFKheCsb+JB2eOeNp9jj9uwjAUh79AiFq1Q9WhSxcPLB0SJZZAggOgLl25AASUobEUysJBWHsGVo7BAThDj8DP9HXpgCXbn5+/9wd4ZE9CXAl3PBv3yHgz7jNkZ5zKORgPeOBknCn+IzNJ7xV5umZF7qn+q3Gfd0rjVM638YAXjsaZ4mcaFgRaVtfzC5pFaFehFX1Qs5Sw5VOPetlsdc/Mi3fHWorDU6ibY6r9v95v1DMmZ6TtZVZMVEg9ZqFb184XpZu6v75CP85HuS8rWTfGm6t3x0ZK/HKqGqdgXnebJrSuKspb6Rdv+jyYAAAAeNpjYGJABowM6IAdLMrEyMTIzMjCyMqWlpiXUZrJVpSak5+YwpKRn5vKkpOaVgIAamYIegAAAAH//wACeNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BgYGQAgqtL1DlA9E3+L2YwGgA8OQXOAAA=) format('woff'); 92 | font-weight: 500; 93 | font-style: normal; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /components/navigationBar/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // 这里定义属性，属性值可以在组件使用时指定 4 | back: {//是否显示返回 5 | type: Boolean, 6 | value: false, 7 | }, 8 | background: {//导航栏背景色 9 | type: String, 10 | value: '#ffffff',//默认 11 | observer: function(newVal,oldVal,changedPath){ 12 | if(!newVal){ 13 | let obj = {}; 14 | obj[changedPath[0]] = oldVal; 15 | this.setData(obj); 16 | } 17 | } 18 | }, 19 | placeholderBg: {//导航栏占位栏背景色 20 | type: String, 21 | value: 'transparent',//默认 22 | observer: function(newVal,oldVal,changedPath){ 23 | if(!newVal){ 24 | let obj = {}; 25 | obj[changedPath[0]] = oldVal; 26 | this.setData(obj); 27 | } 28 | } 29 | }, 30 | color: {//导航栏字体色 31 | type: String, 32 | value: '#000000',//默认 33 | observer: function(newVal,oldVal,changedPath){ 34 | if(!newVal){ 35 | let obj = {}; 36 | obj[changedPath[0]] = oldVal; 37 | this.setData(obj); 38 | } 39 | } 40 | }, 41 | fontSize: {//导航栏字大小 42 | type: String, 43 | value: '16px',//默认 44 | observer: function(newVal,oldVal,changedPath){ 45 | if(!newVal){ 46 | let obj = {}; 47 | obj[changedPath[0]] = oldVal; 48 | this.setData(obj); 49 | } 50 | } 51 | }, 52 | title: {//导航栏标题 53 | type: String, 54 | value: 'none', //默认 55 | observer: function(newVal,oldVal,changedPath){ 56 | // console.log(newVal,oldVal,changedPath); 57 | if(!newVal){ 58 | let obj = {}; 59 | obj[changedPath[0]] = oldVal; 60 | this.setData(obj); 61 | } 62 | } 63 | }, 64 | fixed: {//导航栏是否fixed定位 65 | type: Boolean, 66 | value: true, //默认 67 | observer: function(newVal,oldVal,changedPath){ 68 | // console.log(newVal,oldVal,changedPath); 69 | if(newVal !== false && newVal !== true){ 70 | let obj = {}; 71 | obj[changedPath[0]] = oldVal; 72 | this.setData(obj); 73 | } 74 | } 75 | }, 76 | backStyle: {//导航栏返回按钮的风格 77 | type: String, 78 | value: 'normal', //默认值 可赋值simple或者normal 79 | observer: function (newVal, oldVal, changedPath) { 80 | // console.log(newVal,oldVal,changedPath); 81 | if (!newVal) { 82 | let obj = {}; 83 | obj[changedPath[0]] = oldVal; 84 | this.setData(obj); 85 | } 86 | } 87 | }, 88 | backEvent: {//是否绑定返回按钮事件 89 | type: Boolean, 90 | value: false, //默认 91 | observer: function (newVal, oldVal, changedPath) { 92 | // console.log(newVal,oldVal,changedPath); 93 | if (newVal !== false && newVal !== true) { 94 | let obj = {}; 95 | obj[changedPath[0]] = oldVal; 96 | this.setData(obj); 97 | } 98 | } 99 | }, 100 | backHomeEvent: {//是否绑定返回首页按钮事件 101 | type: Boolean, 102 | value: false, //默认 103 | observer: function (newVal, oldVal, changedPath) { 104 | // console.log(newVal,oldVal,changedPath); 105 | if (newVal !== false && newVal !== true) { 106 | let obj = {}; 107 | obj[changedPath[0]] = oldVal; 108 | this.setData(obj); 109 | } 110 | } 111 | }, 112 | }, 113 | data: { 114 | // 这里是一些组件内部数据 115 | height: 44,//导航栏高度, 116 | paddingTop: 20,//导航栏上内边距对应状态栏高度 117 | showHomeButton: false,//是否显示返回首页 118 | show: true,//是否显示导航栏 119 | navigationBarTextStyle: 'black' 120 | }, 121 | attached: function(option){ 122 | //检测首页是否在当前页面栈中 123 | let pages = getCurrentPages(); 124 | let showHomeButton = false; 125 | if(pages.length < 2 && pages[0].route != __wxConfig.pages[0]){ 126 | showHomeButton = true; 127 | } 128 | //导航栏自适应 129 | let systemInfo = wx.getSystemInfoSync(); 130 | let reg = /ios/i; 131 | let pt = 20;//导航状态栏上内边距 132 | let h = 44;//导航状态栏高度 133 | if(reg.test(systemInfo.system)){ 134 | pt = systemInfo.statusBarHeight; 135 | h = 44; 136 | }else{ 137 | pt = systemInfo.statusBarHeight; 138 | h = 48; 139 | } 140 | var navigationBarTextStyle = __wxConfig.global.window.navigationBarTextStyle;//获取当前项目导航栏文本风格 141 | this.setData({ 142 | height: h, 143 | paddingTop: pt, 144 | showHomeButton: showHomeButton, 145 | navigationBarTextStyle: navigationBarTextStyle 146 | }) 147 | console.log(this); 148 | }, 149 | methods: { 150 | // 这里是一个自定义方法 151 | /** 152 | * 返回上一页 153 | */ 154 | navigateBack(){ 155 | if (!this.properties.backEvent){ 156 | this.runBack(); 157 | return; 158 | } 159 | this.triggerEvent('back'); 160 | }, 161 | runBack(){ 162 | let pages = getCurrentPages(); 163 | if (pages.length < 2 && pages[0].route != __wxConfig.pages[0]) { 164 | wx.reLaunch({ url: '/' + __wxConfig.pages[0] }) 165 | } else { 166 | wx.navigateBack({ delta: 1 }); 167 | } 168 | }, 169 | /** 170 | * 返回首页 171 | */ 172 | navigateBackHome(){ 173 | if (!this.properties.backHomeEvent) { 174 | this.runBackHome(); 175 | return; 176 | } 177 | this.triggerEvent('backHome'); 178 | }, 179 | runBackHome() { 180 | let pages = getCurrentPages(); 181 | if (pages[0].route === __wxConfig.pages[0]) { 182 | wx.navigateBack({ delta: 10 }); 183 | } else { 184 | wx.reLaunch({ url: '/' + __wxConfig.pages[0] }) 185 | } 186 | }, 187 | /** 188 | * 切换导航栏显示 189 | */ 190 | toggleShow(){ 191 | if(!this.data.show){ 192 | this.setData({ show: true }); 193 | } 194 | }, 195 | /** 196 | * 切换导航栏隐藏 197 | */ 198 | toggleHide() { 199 | if (this.data.show) { 200 | this.setData({ show: false }); 201 | } 202 | } 203 | } 204 | }) --------------------------------------------------------------------------------