导航栏 NavigationBar（开发中）

使用场景：需要胶囊按钮返回首页、导航栏自定义背景图片等场景

注意

使用该组件必须同时满足以下两个条件：

核心概念

因 NavigationBar 元素较多，为了便于你理解文档，我会简单介绍一下导航栏各个部分的名称

首先，我们把导航栏分为 4 个部分：StatusBar、TitleBar、CapsuleButton、NavigationBar

  • StatusBar——状态栏，手机顶部显示信号、电量等信息的区域
  • TitleBar——标题栏，显示导航栏标题的区域
  • CapsuleButton——胶囊按钮，标题栏左侧胶囊按钮
  • NavigationBar——导航栏，等于 状态栏 + 标题栏

以上四个名词分别对应的部分如下图所示：

导航栏 NavigationBar（开发中） - 图3

基本用法

使用 NavigationBar 仅需传入home-page（主页路径）和title（页面标题）两个属性，l-navigation-bar标签位于整个页面最外层。

  1. <!-- NavigationBar 基础用法 -->
  2. <l-navigation-bar home-page="/pages/navigator/index/index" title="林间有风">
  3.     <view>页面内容</view>
  4. </l-navigation-bar>

高级用法

NavigationBar 的亮点除了构造了一个胶囊按钮外，更加强大的是支持图片背景，这是微信小程序原生导航栏所无法实现的。

要支持图片背景，只需将navigation-bar-color设置为transparent即可，然后你便可以在l-navigation-bar标签内随意布局你的图片了

  1. <!-- NavigationBar 图片背景 -->
  2. <l-navigation-bar 
  3.   navigation-bar-color="transparent"
  4.   capsule-button-color="white"
  5.   title-color="white"
  6.   home-page='/pages/navigator/index/index' 
  7.   title="林间有风">
  9.   <view class="container">
  10.       <!-- NavigationBar 背景图片 -->
  11.     <image 
  12.       style="height:{{navigationBarHeight}}px;" 
  13.       class="navigation-bar-image" 
  14.       src="https://img.juzibiji.top/20200523214628.png">
  15.     </image>
  17.     <!-- 以下部分放置页面内容 -->
  18.     <view>这里是你的页面内容</view>
  19.   </view>
  20. </l-navigation-bar>
  1. .container{
  2.   width:100%;
  3. }
  5. .navigation-bar-image{
  6.   width:100%;
  7.   position:fixed;
  8.   top:0;
  9.   left:0;
  10. }
  1. import navigationBarUtil from '/miniprogram_npm/lin-ui/navigation-bar/navigation-bar-util'
  3. Page({
  4.   data:{
  5.     navigationBarHeight:navigationBarUtil.getNavigationBarHeight()
  6.   }
  7. })

导航栏高度

NavigationBar 的高度在不同的机型上是不一样的，内部使用了一个公式计算出了不同机型最合适的高度。如果你想在页面中获取这些高度，可以使用工具类navigation-bar-util.js，它有 4 个函数可以让你获取 NavigationBar 的布局信息,详见工具类函数。

  1. import navigationBarUtil from '/miniprogram_npm/lin-ui/navigation-bar/navigation-bar-util'
  3. Page({
  4.   /**
  5.    * 获取 NavigationBar 高度
  6.    */
  7.   getNavigationBarHeight(){
  8.       const navigationBarHeight = navigationBarUtil.getNavigationBarHeight()
  9.       consoloe.log(`NavigationBar 的高度为${navigationBarHeight}rpx`)
  10.   }  
  11. })

胶囊按钮颜色

NavigationBar 提供的胶囊按钮与原生胶囊按钮样式相似度达到 99%，可通过capsule-button-color属性控制按钮颜色。

导航栏右侧的原生胶囊按钮颜色和StatusBar文字颜色需通过页面配置项navigationBarTextStyle导航栏 NavigationBar（开发中） - 图4修改。

导航栏属性（NavigationBar Arrtibutes）

下列属性以color结尾的，除可选值有特殊标注外，均可使用 HEX/RGBA/CSS 颜色名 作为值传入，表中不再单独说明。

参数说明类型可选值默认值版本号
navigation-bar-colorNavigationBar背景色String—-white—-
status-bar-colorStatusBar背景色String—-white—-
title-bar-colorTitleBar背景色String—-white—-
title-color标题颜色String—-black—-
capsule-button-color左侧胶囊按钮颜色Stringwhite/blackwhite—-
disable-back禁用左侧按钮返回上一级页面Boolean—-false—-
disable-home禁用右侧按钮返回主页Boolean—-false—-
hidden-capsule-button隐藏胶囊按钮Boolean—-false—-
home-page主页面 url，点击右侧按钮时跳转String—-—-—-
title导航栏标题String—-—-—-
padding-top页面是否设置顶部内边距为 NavigationBar 的高度Boolean—-true—-

关于 padding-top 属性的说明：

  • 为 true 时：页面内容布局从导航栏下边缘开始，适用于导航栏有背景色时使用
  • 为 false 时，页面内容布局从屏幕顶部下边缘开始，适用于导航栏背景透明时使用

导航栏外部样式类（NavigationBar ExternalClasses）

外部样式类名说明备注版本号
l-title-class覆盖标题文字样式—-—-

导航栏事件（NavigationBar Events）

事件名称说明返回值备注版本号
bind:linlefttap点击胶囊左侧按钮回调事件（在返回上一页之前触发）—-—-—-
bind:linleftlongpress长按胶囊左侧按钮回调事件—-—-—-
bind:linrighttap点击胶囊右侧按钮回调事件（在返回主页之前触发）—-—-—-
bind:linrightlongpress长按胶囊右侧按钮回调事件—-—-—-

导航栏插槽（NavigationBar Slot）

Slot 名称说明备注版本号
默认 slot页面内容区域—-—-

导航栏工具类（NavigationBar Util Class）

函数名称返回值返回类型备注
getNavigationBarHeightNavigationBar 的高度（单位 rpx）Number—-
getStatusBarHeightStatusBar 的高度（单位 rpx）Number—-
getTitleBarHeightTitleBar 的高度（单位 rpx）Number—-
getCapsuleButtonInfoCapsuleButton 位置信息ObjectObject 的具体属性和微信 API 一致导航栏 NavigationBar（开发中） - 图5