lingxiaoyi/navigation-bar

微信小程序自定义导航栏组件,navigation,完美适配全部手机

小程序组件 navigation-bar

小程序自定义导航栏适配 完美解决内容上下不居中问题

Navigation

Navigation 是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏

引入组件

在 page.json 中引入组件

{
  "usingComponents": {
    "navBar": "/components/navBar/navBar"
  }
}

示例代码

<!--WXML示例代码-->
 <navBar title='有返回和home' background='#fff' back="{{true}}" home="{{true}}" bindback="handlerGobackClick" bindhome="handlerGohomeClick"></navBar>

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的 class，可用于修改组件内部的样式
title	string		否	导航标题，如果不提供，则名为 center 的 slot 有效
background	string	#ffffff	否	导航背景色
backgroundColorTop	string	background	否	导航下拉下方背景色,详细参考下方
color	string	#000000	否	导航字体颜色
iconTheme	string	black	否	主题图标和字体颜色,当背景色为深色时,可以设置'white'
back	boolean	false	否	是否显示返回按钮，默认点击按钮会执行 navigateBack，如果为 false，则名为 left 的 slot 有效
home	boolean	false	否	是否显示 home 按钮，执行方法自定义,或者看例子
searchBar	boolean	false	否	是否显示搜索框，默认点击按钮会执行 bindsearch，如果为 false，则名为 center 的 slot 有效
searchText	string	点我搜索	否	搜索框文字
bindhome	eventhandler		否	在 home 为 true 时，点击 home 按钮触发此事件
bindback	venthandler		否	在 back 为 true 时，点击 back 按钮触发此事件，detail 包含 delta
bindsearch	eventhandler		否	在 searchBar 为 true 时，点击 search 按钮触发此事件

注:backgroundColorTop见 issue 问题

Slot

名称	描述
left	左侧 slot，在 back 按钮位置显示，当 back 为 false 的时候有效
center	标题 slot，在标题位置显示，当 title 为空的时候有效
right	在导航的右侧显示

注意

• iconTheme 设置为 white 的时候,一定要记得自己去 json 文件设置"navigationBarTextStyle": "white"
• 跳转搜索页面,在 Android 机子会出现文字被键盘弹起顶出 input 框,解决方案页面设置一个死的高度不要高于 windowHeight - navheight 例子中是设置 500px
• input 框文字抖动问题我是借鉴别人写的,可以最大限度减小文字抖动的大小,提升用户体验
• title searchBar slot="right" 如果全部有内容,是这样的先后显示顺序.
• 默认配置满足不了功能的,请使用 slot 功能,见例子 1 6 7
• 由于本人精力有限,只测试了常规的 20 多款手机.如有哪种机型出现问题,请备注机型和小程序版本库.本人会以最快方式解决问题.
• 有什么 bug 和建议,还有功能上的问题请提 pr

后续

• 其他功能,规划中,或者留言联系方式微信 zhijunxh
• 还需要其他样子的例子请留言,如果功能比较重要和主流的话,我会考虑第一时间添加

备注

• 渐变和动态修改背景色请参考例子 10,ios 机子会出现滚动渐变颜色加载出来不能消失的问题,暂时没想到解决办法,这是微信浏览器渲染的问题,社区里面相关问题地址
• getMenuButtonBoundingClientRect 胶囊按钮信息获取不到或者此方法报错问题已修复 获取菜单报错，需要捕捉异常和兼容版本导航栏渲染不出来

测试信息

手机型号	胶囊位置信息	statusBarHeight	测试情况
iPhoneX	80 32 281 369 48 88	44	通过
iPhone8 plus	56 32 320 408 24 88	20	通过
iphone7	56 32 281 368 24 87	20	通过
iPhone6 plus	56 32 320 408 24 88	20	通过
iPhone6	56 32 281 368 24 87	20	通过
HUAWEI SLA-AL00	64 32 254 350 32 96	24	通过
HUAWEI VTR-AL00	64 32 254 350 32 96	24	通过
HUAWEI EVA-AL00	64 32 254 350 32 96	24	通过
HUAWEI EML-AL00	68 32 254 350 36 96	29	通过
HUAWEI VOG-AL00	65 32 254 350 33 96	25	通过
HUAWEI ATU-TL10	64 32 254 350 32 96	24	通过
HUAWEI SMARTISAN OS105	64 32 326 422 32 96	24	通过
XIAOMI MI6	59 28 265 352 31 87	23	通过
XIAOMI MI4LTE	60 32 254 350 28 96	20	通过
XIAOMI MIX3	74 32 287 383 42 96	35	通过
REDMI NOTE3	64 32 254 350 32 96	24	通过
REDMI NOTE4	64 32 254 350 32 96	24	通过
REDMI NOTE3	55 28 255 351 27 96	20	通过
REDMI 5plus	67 32 287 383 35 96	28	通过
MEIZU M571C	65 32 254 350 33 96	25	通过
MEIZU M6 NOTE	62 32 254 350 30 96	22	通过
MEIZU MX4 PRO	62 32 278 374 30 96	22	通过
OPPO A33	65 32 254 350 33 96	26	通过
OPPO R11	58 32 254 350 26 96	18	通过
VIVO Y55	64 32 254 350 32 96	24	通过
HONOR BLN-AL20	64 32 254 350 32 96	24	通过
HONOR NEM-AL10	59 28 265 352 31 87	24	通过
HONOR BND-AL10	64 32 254 350 32 96	24	通过
HONOR duk-al20	64 32 254 350 32 96	24	通过
SAMSUNG SM-G9550	64 32 305 401 32 96	24	通过
360 1801-A01	64 32 254 350 32 96	24	通过

~ 创作不易,如果对你有帮助，请给个星星 star✨✨ 谢谢 ~

navigation-bar's Issues

navBar 配合微信官方自定义tabar出现tabbar无padding

微信官方自定义tabbar例子中，
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: #fff;
display: flex;
padding-bottom: env(safe-area-inset-bottom); //失效
}

当前页面的导航使用NavigationBa组件r时，该页面的底部tabBar的padding会无效
我尝试去掉NavigationBar的Component引用即恢复正常，有人遇到吗？

也是魅族手机，Meizu Note 5，左边按钮位置不对

原因：获取到的胶囊按钮top居然小于状态栏高度，导致计算gap不对
let gap = rect.top - systemInfo.statusBarHeight;

测试Meizu Note 5通过的解决办法解决，在navBar.js中加上
//部分机型（比如：Meizu Note5）获取到的胶囊按钮top小于状态栏statusBarHeight高度 if(rect.top < systemInfo.statusBarHeight){ throw 'getMenuButtonBoundingClientRect error'; }

真机调试获取到的信息：

真机截图：

解决后真机截图：

异步请求并设置title属性后，不居中

如题，在onload中异步请求数据后动态设置title属性，title没有在页面上居中显示。

开启下拉刷新问题

例如 demo4 设置 "enablePullDownRefresh": true 后

<view>
  <!-- <navBar title='深色背景详情页' background='#00091a' backgroundColorTop='#00091a' color='#fff' back="{{true}}" iconTheme='white' bindback="handlerGobackClick"></navBar> -->
  <!-- < 个人中心 -->
  <navBar background='#00091a' backgroundColorTop='#00091a' color='#fff' back="{{false}}" home="{{false}}" iconTheme='white' bindback="handlerGobackClick">
    <view slot="left" class="left-title-wrapper" bind:tap="handlerGobackClick">
      <image class="left-title-arrow" src="https://xxx.png" />
      <text class="left-title">个人中心</text>
    </view>
  </navBar>

  <view class='main'>
    <view class='p'>深色背景详情页</view>
  </view>
</view>

代码注释不对

怎么样能动态的控制navbar的背景色呢？

需要控制小程序的白天和夜间模式，要动态的改背景色和iconTheme

当只显示一个图标时，背景不会随着变窄

当只显示一个图标时，背景不会随着变窄，在透明背景时体验不行

Redmi 6 Pro 显示有问题

调试基础库：2.8.2

iPhone 6s机型导航栏渲染不出来

在iPhone 6s部分机型下，偶现导航栏渲染不出来或者高度为0的情况，导致下边布局顶上去了。

下拉刷新，页面默认不是白色，会把导航栏隐藏的白色拉下来，能否自定义颜色呢

下拉刷新，页面默认不是白色，会把导航栏隐藏的白色拉下来，能否自定义颜色呢？
如图，页面背景色非白色，下拉出现导航栏隐藏的白色部分。

获取菜单报错，需要捕捉异常和兼容版本

看了一下线上小程序的日志，发现报错信息集中在 getMenuButtonBoundingClientRect，社区里面也有相关记录：https://developers.weixin.qq.com/community/develop/doc/000c8835e544c0123309255ee5fc00

如果页面要设置一个position: fixed;top:0;的副标题怎么办呢 苹果x和普通手机里会非常不稳定

您好, 如果页面要设置一个position: fixed;top:0;的元素 在刘海屏和普通屏幕中 top的设置很不稳定 有时候会过上有时候又过于下边, 请问有什么解决方案呢 感谢您

请问为什么有两个似乎好像一模一样的项目？

该项目star更多，但是文档缺失，npm下载量更少。

另一个项目star较少，但文档全，npm下载量多：
https://github.com/lingxiaoyi/miniprograms-navigation-bar#readme

制作吸顶效果时需要知道navbar的高度，如何获取？

https://github.com/lingxiaoyi/navigation-bar/blob/master/pages/demo10/index.js
参考这个例子

出现显示错位问题

加入组件导致自定义分享失效，有解决方案吗？

只要是在app.js里面设置了引入page这个js文件这个分享就会失效
去掉这个引入就会正常，如：

魅族 M3 的手机样式乱了，bar 高度对不上

ios平台上外层采用position:fiexed, z-index无效

• 基础调试库版本： 2.8.3
• 微信都是当前最新版本

wxml:

<view class="search">
    <navBar searchBar="{{true}}" background="{{searchBGColor}}"  bindsearch='search' />
</view>

wxss:

.search {
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 9999;   /* z-index 设置值超过navBar的最大z-index值 */
    position: fixed;
}

开发者工具预览都是正确的，真机(iphone xr/ipad pro)就不行了，大佬有测试过吗？

开发者平台调试效果：

真机效果：

ps: android真机是ok的。

通过别人分享进来的情况，要如何隐藏返回按钮

目前有个业务场景，点击别人分享的小程序进来的情况需要隐藏返回按钮，毕竟点击返回也无法返回上一页。。。
类似这种

实现 动态的控制navbar的背景色、返回按钮和title显示颜色 的方案

为了实现返回 icon 和title根据滑动距离动态改变颜色，用了icon font 显示返回按钮。
在第4行“”
和
第23行“{{title}}”
分别添加了“style="color:{{color}}"”
这样就可以实现了。
希望有帮助

title不居中

网络请求数据动态设置title时,title显示不居中,静态写死是居中的

getMenuButtonBoundingClientRect问题和css选择器问题

1. 在ios7.0.3版本，iPhone 6s机型下，getMenuButtonBoundingClientRect有时候会报错，有时候取到的值都为0，所以在你的try catch中加了一条：
   try { rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width){ throw 'getMenuButtonBoundingClientRect error'; } }

2. 组件中不能使用标签等选择器，你的navBar.wxss是有标签选择器的。

导航栏和页面有1px的空隙问题

页面背景色和标题栏设置一样，计算的导航栏高度为 68px ，但是实际高度为 69px ，中间会有一个缝隙

在wepy 框架中 怎么引用呢

Component is not found in path "components/navBar" (using by "pages/index");onAppRoute
Error: Component is not found in path "components/navBar" (using by "pages/index")

还有 Components/navBar 目录下面的那个 app.js 怎么处理

无法返回标签页是什么意思？

navigateTo:fail:can not navigate to a tab bar page

我的页面是scroll-view撑满整个页面的，页面高度计算的时候，就会多出来自定义导航栏的高度。

height: calc(100vh - 84rpx);，这是我原来减去tab的84,现在不行了

只设置返回按钮时 title的文字没有居中

只设置返回按钮时 title的文字没有居中

返回首页的问题

如果首页是tarbar，则需要使用switchTab。

页面使用了这个自定义的导航，同时也使用了自定义tabbar，tabbar变形？

iphoneX tabbar变形：全局使用自定义的tabbar，其他tab来回切换都正常，切到自定义导航栏的界面就会出现tabbar变形问题，求助

this._getApp is not a function; [Component] Lifetime Method Error @ components/navBar/navBar#created TypeError: this._getApp is not a function

thirdScriptError
this._getApp is not a function; [Component] Lifetime Method Error @ components/navBar/navBar#created
TypeError: this._getApp is not a function
at ye.getSystemInfo (http://127.0.0.1:63328/appservice/components/navBar/navBar.js:146:22)
at ye.created (http://127.0.0.1:63328/appservice/components/navBar/navBar.js:70:10)
at r.safeCallback (WAService.js:1:1037423)
at r.call (WAService.js:1:1037316)
at Function.x._advancedCreate (WAService.js:1:1136263)
at r.createComponent (WAService.js:1:1146424)
at e (WAService.js:1:1179207)
at e (WAService.js:1:1180502)
at e.value (WAService.js:1:1204216)
at x._advancedCreate (WAService.js:1:1134731)

内容区绝对定位的问题

内容区如果使用顶部绝对定位，就定位到胶囊区了， 使用绝对定位的地方去app.globalSystemInfo拿高度数据，由于是异步，第一次进来有可能又获取不到。

大佬是否有兴趣和时间再做一个 uniapp 版的哈 感谢大佬哈