收藏
评论

分享一个自适应的自定义导航栏组件

自定义导航栏的一些常见问题:

1、怎么适配手机状态栏高度,使导航栏与胶囊按钮对齐?

2、写了导航栏组件但是用了fixed定位,脱离普通文档流,要麻烦的去每个页面加padding-top。

3、怎么让导航栏跟page融合到一起,跟随page滚动,这样就不用在这个页面单独适配状态栏了。

4、怎么自动识别非首页启动的小程序,在自定义导航栏加个返回首页的引导?

使用案例可导入代码片段【现在导入】查看。


子页面



非首页启动的小程序


跟随页面,不置顶。

监测滚动切换导航栏的显示或隐藏。




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

weapp-navigation-bar

因为小程序原生导航栏的一些限制,比如:不能设置字体大小,ios标题居中而安卓居左,从非首页启动小程序返回首页菜单不明显,屏幕空间不能最大化使用。因此微信开放了小程序自定义导航栏,允许用户最大化的使用屏幕空间。但是自定导航栏不支持只指定某些页面使用,而是全局的,所以也带来了一些适配问题。

本导航栏组件支持

  1. 可根据手机状态栏高度适配。
  2. 可自定义设置包括字体颜色、字体大小、背景颜色、无标题、导航栏是否置顶。
  3. 可自动识别是否首页launch。

使用说明

使用前需要了解小程序自定义组件自定义导航栏。 app.json配置以下属性

"window":{
    "navigationStyle": "custom",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "自定义导航栏",
    "navigationBarTextStyle":"white"
  }

如果已了解,可直接把组件拷贝到项目里引用,用法可参考example。

额外说明:小程序右上角胶囊颜色,可通过navigationBarTextStyle设置,支持black和white。 为了提高兼容性,建议把所有页面内容写在设置的页面容器里,参考example。

组件自定义属性说明

属性 说明 类型 默认值
title 标题 String none
color 标题字体颜色 String #000000
fontSize 导航栏字体大小,单位rpx、px String 40rpx
background 导航栏背景颜色 String #ffffff
placeholderBg 导航栏占位栏背景色 String transparent
back 是否显示导航栏返回按钮 Boolean false
fixed 导航栏是否fixed定位置顶 Boolean true
最后一次编辑于  05-26
收藏

8 个评论

  • mf
    mf
    05-06

    有webview的页面还是不能使用吧

    05-06
    赞同 1
    回复 1
    • 安晓苏
      安晓苏
      05-26

      目前微信还没开放webview的自定义。

      05-26
      回复
  • Congcun
    Congcun
    06-10

    这个胶囊有官方的设计组件吗?


    06-10
    赞同
    回复
  • 安晓苏
    安晓苏
    05-26
    1. 增加normal风格的返回按钮,旧版本的定义为simple风格,支持两种风格切换。

    2. 点击返回按钮和点击首页按钮,支持在外部绑定事件,使用方法,请参考example

    新版增加了功能,欢迎更新体验。例外readme说明到GitHub上面查看最新的属性,这里没有同步下来。

    05-26
    赞同
    回复
  • vking.wang
    vking.wang
    02-22

    很好,之前一直算不准导航的高度,看了这个例子,完美解决

    02-22
    赞同
    回复
  • Carry On Hxy
    Carry On Hxy
    2018-12-07

    不错!

    2018-12-07
    赞同
    回复
  • Meng Sio
    Meng Sio
    2018-11-29

    有没有什么方法,使得android分享时,只截取内容部分,而不截取导航栏部分。ios是这样的。

    2018-11-29
    赞同
    回复
  • 李方超(Edwin)
    李方超(Edwin)
    2018-11-22

    这个对小米8不适应

    2018-11-22
    赞同
    回复
  • Daaddy🦍
    Daaddy🦍
    2018-10-25

    扫码后居然音乐自动播放。。真曹丹。。

    2018-10-25
    赞同
    回复