NavBar 导航栏

此组件用于自定义导航栏。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
title	String,Object	null	导航栏标题为Object时参考c-text的props	All
leftIcon	String,Object	back	左边返回图标的名为object时，请参考c-icon的props	All
leftText	String,Object	null	左边的提示文字为Object时参考c-text的props	All
hideLeft	Boolean	false	隐藏整个左侧	All
color	String	c-t-main	标题、文字和icon的统一默认颜色支持c-t开头的颜色类	All
fixed	Boolean	false	导航栏是否固定在顶部	All
placeholder	Boolean	true	固定在顶部时，是否生成一个等高元素，以防止塌陷	All
titleWidth	String,Number	120px	导航栏标题的最大宽度，内容超出会以省略号隐藏	All
statusBarBgColor	String	null	状态栏颜色默认和背景色保持一致	All
customBackEvent	Boolean	false	自定义返回事件	All
homeIcon	String,Object	home	返回主页icon 只有getCurrentPages只有当前一个页面，且不为首页时显示配置请参考c-icon的props	All
hideHomeIcon	Boolean	false	隐藏首页icon 如果当前页是tab页，这里设置为true	All
homeRoute	Object	{}	首页的路由配置主要用于小程序下，从分享页面进入时，进入首页格式参考uni.$c.route	All
isPageNav	Boolean	false	是否为非页面级导航如果是用在弹出层等，设为true true时奖不会判断leftIcon和homeIcon的显示，且fixed下位绝对定位	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持`c-bg-`开头的背景色类	All

使用自定义导航，需配置page.json

{
  // 全局配置
  "globalStyle": {
    "navigationStyle": "custom"
  },
  // 或页面单独配置
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

支付宝小程序的配置

{
  "globalStyle": {
    "navigationBarTitleText": "",
    "mp-alipay": {
      "transparentTitle": "always",
      "allowsBounceVertical": "NO",
      "titlePenetrate": "YES",
      "enableScrollBar": "NO",
      "gestureBack": "YES"
    }
  },
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        // 不要设置标题
        // "navigationBarTitleText": "首页"
      }
    }
  ]
}

注意

支付宝小程序下无法去除自带的“返回按钮”和“主页按钮”，所以在支付宝小程序下leftIcon,homeIcon将显示透明。

事件

事件名	说明
back	`customBackEvent`为`true`时有效
titleClick	点击标题时触发

插槽

插槽名	说明
left	使用后将替换默认的左侧返回按钮、文字和主页按钮
default	标题插槽
right	右侧插槽

示例

vue

<template>
    <c-nav-bar title="首页" />
</template>

NavBar 导航栏 ​

平台 ​

属性 ​

事件 ​

插槽 ​

示例 ​

平台

属性

事件

插槽

示例