mp-navigation-bar

mp-navigation-bar 1.x

微信小程序自定义导航组件

仿照小程序官方提供的自定义导航组件，添加了回到首页功能。

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

旧版本

0.x 版本是以 cover-view 组件做的，目的是覆盖页面内容的一些原生组件，但鉴于微信小程序已提供原生组件同层渲染能力，且 cover-view 组件有很多限制，1.x版本又改回了 view 组件来做。

0.x README

BUGs

• input 组件在较低位置(距离底部高度低于键盘高度)获取焦点时，弹出键盘会将导航栏顶起。 无法处理，只能通过布局尽量避免这种情况。 或者设置 adjust-position="{{false}}" 属性并配合聚焦、失焦、键盘高度改变事件动态更改输入框的定位位置。

TIPs

1. 回到首页，首页的默认值为 /pages/home/home，可以通过设置 app.__APP_HOME_PATH__ 来修改回到首页的页面路径。

2. auto-stick 属性如果是动态设置的，状态改变时，会触发页面内容重新渲染，从而可能引起预料外的问题。

   如在安卓端，视频全屏播放时，设置 hide-nav="true" auto-stick="true" 会导致视频退出全屏并暂停。

   此种情况，请只设置 hide-nav="true" 来隐藏导航，在视频退出全屏时再设置显示导航。

使用演示

使用方法

1. 安装 mp-navigation-bar

$ npm install --save mp-navigation-bar

1. 在 app.json 中的 window.navigationStyle 设置为 "custom" 来开启自定义导航：

{
  "window": {
    "navigationStyle": "custom"
  }
}

或者单独在页面的json文件中设置【需要iOS/Android微信客户端7.0.0以上支持】

{
  "navigationStyle": "custom"
}

1. 在需要使用 mp-navigation-bar 的页面 page.json 中，添加配置引入导航组件：

{
  "usingComponents": {
    "navigation-bar": "mp-navigation-bar"
  }
}

1. 在 wxml 文件中使用 <navigation-bar>

<navigation-bar title="{{title}}" bindback="handleBack" bindhome="handleHome">
  <view class="page-content">Page content here.</view>
</navigation-bar>

属性介绍

属性名称	类型	默认值	是否必须	说明
title	String	''	否	导航栏标题
enable	Boolean	true	否	是否允许点击返回/回到首页按钮
delta	Number	1	否	返回的页面数
show-home	Boolean	true	否	是否显示首页按钮 (不推荐)
hide-home	Boolean	false	否	是否隐藏首页按钮 (1.x) (推荐)
hide-back	Boolean	false	否	是否隐藏返回按钮
bg-color	String	white	否	导航栏背景色 (支持 image、渐变色)
text-style	String	dark	否	导航栏标题文字颜色 (dark/light)
auto-height	Boolean	true	否	是否由内容自动撑开高度, 为 false 时，会设置 height: 100%，请注意给父组件设置高度 (0.0.6)
hide-nav	Boolean	false	否	是否隐藏自定义导航 (0.0.9)
auto-stick	Boolean	false	否	隐藏自定义导航时，是否将内容自动上推到顶 可通过 background, opacity 配合 autoStick 模拟原生 APP 沉浸式页面样式 (0.0.9)
opacity	Number	1	否	自定义导航的不透明度,不会影响返回/首页按钮部分 (0.0.10)
use-custom-action	Boolean	false	否	隐藏默认的返回/首页按钮，通过 slot="action" 插槽自定义返回按钮
can-back-mp	Boolean	false	否	当小程序的启动场景为 1037，即从其他小程序打开时，在页面堆栈只剩下一个时，是否可以点击返回到前一个小程序
mp-extra-data	Object	{}	否	can-back-mp 为 true 时，在返回上一个小程序时传递的数据
safe-area-bottom	Boolean	false	否	用于适配 iPhone X 等底部有一条黑线的机型，给页面内容设置一个底部的安全区域

事件介绍

事件名称	参数	说明
bindback	Object	点击返回按钮的事件
bindhome	Object	点击主页按钮的事件

方法

方法名称	参数	说明
disappearNavigation	-	调用方法来隐藏导航栏，用于不方便通过传参的方式来隐藏的时候 (0.0.11)
displayNavigation	-	调用方法来显示导航栏，与 disappearNavigation 相对 (0.0.11)

slot

1. 默认 slot 为方便使用者装载页面内容使用。 由于导航为 fixed 定位，故不占用文档流位置，使用时需要在页面顶部留足相应的边距。 该插槽已经留出这部分边距，避免用户每个页面都手动设置一次。

2. 第二个为用户自定义左上角位置的slot，name=action 该部分通过 absolute 定位在左侧。

3. 第三个插槽为标题插槽， slot="title" 可通过该插槽设置非简单文本类标题，如图片标题。