安装

tnpm install --save @alipay/adc-nav-bar

组件介绍

能力中心小程序索导航栏组件，可自定义导航栏样式，满足业务需求，使用时需添加"transparentTitle": "always"。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 自定义样式 | - | - title | 否 | string | 导航栏标题 | - | 首页 align | 否 | string | justify-content对齐方式 | flex-start | flex-end fill | 否 | boolean | 是否填充头部 | true | false isBack | 否 | boolean | 是否需要返回按钮 | true | false useSlot | 否 | boolean | 是否自定义标题 | false | true fontSize | 否 | string | 字体大小 | 32rpx | 36rpx color | 否 | string | 字体颜色 | #fff | #000 zIndex | 否 | string | z-index | '' | 9 onCallback | 否 | Function | navbar加载完成回调，返回navbar高度 | null | (e)=>{} onTitleBarTap | 否 | Function | 点击navbar | #null | (e)=>{} background | 否 | string | 背景颜色 | linear-gradient(246deg, #FADC0F 0%, #FA8C12 100%, #FA8C12 100%) | #fff backBtnColor | 否 | string | 设置返回按钮颜色 | '' | #fff

在小程序中使用

{
  "usingComponents": {
    "mas-adc-nav-bar": "@alipay/adc-nav-bar/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<adc-nav-bar title="标题" isBack="{{false}}" background="{{background}}"></adc-nav-bar>
<view>
  这是文本内容....
</view>

Badges