Navbar 导航栏

介绍

一般用于页面顶部的导航栏

使用指南

系统原生的导航栏在使用上有种种限制，例如无法设置底色透明、无法监听用户的返回操作等，不能满足业务需求。又由于自定义导航栏涉及导航栏高度、位置等细节处理，有必要封装一个自定义导航栏来减少业务开发时的难度，同时也能尽量保证应用内部自定义导航栏样式的统一。

navbar具有如下系统原生导航栏不具备的能力：

• 任意自定义标题色
• 任意自定义导航栏背景色；甚至支持随着页面滚动将导航栏背景色从透明渐变为某具体色值
• 首页导航能力
• 如果从APP或从其他小程序拉起小程序，且底页使用了navbar，默认在左上角渲染返回按钮，点击后可返回到来源APP或小程序

属性	类型	默认值	必填	说明
styleName	String	dark	否	导航栏样式风格，影响默认icon颜色 可选值dark/light
float	Boolean	false	否	是否浮动于普通文档流中
title	String		否	导航栏标题
frontColor	String	#333	否	导航栏标题颜色；参数值是合法的CSS颜色值即可
backgroundColor	String	#fff	否	导航栏背景色；参数值是合法的CSS颜色值即可
containerBgColor	String	transparent	否	导航栏容器背景色，用于页面时，与页面保持同底色；参数值是合法的CSS颜色值即可
customContent	Boolean	false	否	是否自定义导航栏内元素
customHomeBtn	Boolean	false	否	是否使用自定义slot配置Home按钮
customHomeEvent	Boolean	false	否	是否自定义首页按钮事件处理，仅当customHomeBtn=false时生效
enableHomeNav	Boolean	false	否	是否启用首页导航功能，启用后导航栏返回按钮右侧会渲染首页导航（小房子）按钮
customBackBtn	Boolean	false	否	是否使用自定义slot配置返回按钮
customBackEvent	Boolean	false	否	是否自定义返回按钮事件处理，仅当customBackBtn=false时生效
backBtnVisible	Boolean	true	否	外部指定返回按钮是否可见，此参数影响返回按钮的可见性； customBackBtn=true时完全根据此参数决定按钮是否可见； 其他情况下根据此参数和页面层级共同决定返回按钮是否可见
customTitle	Boolean	false	否	是否使用自定义slot配置标题
customBackground	Boolean	false	否	是否自定义导航背景
gradient	Boolean	false	否	是否启用背景色渐变效果
pageScrollTop	Number	0	否	页面上划偏移量 启用背景色渐变效果时需传入此值，才能保证导航栏背景色的正常变化
bind:navBarAttached	eventhandle		否	navbar挂载完成
bind:tapBtn	eventhandle		否	点击按钮，如返回按钮、首页按钮

bind:navBarAttached 事件数据结构

假定自定义事件的回调方法函数参数为res，以下为res.detail的数据结构：

属性	类型	说明
statusBarHeight	Number	状态栏高度（像素）
navBarHeight	Number	导航栏高度（像素），不含状态栏部分（像素）
menuTop	Number	菜单按钮上边缘 与 屏幕上边缘的距离（像素）
menuRight	Numer	菜单按钮右边缘距 与 屏幕左边缘的距离（像素）
menuWidth	Numer	菜单按钮宽度（像素）
menuHeight	Numer	菜单按钮高度（像素）
showBackBtn	Boolean	当前是否显示返回按钮
showHomeBtn	Boolean	当前是否显示首页导航按钮

bind:tapBtn 事件数据结构

假定自定义事件的回调方法函数参数为res，以下为res.detail的数据结构：

属性	类型	说明
name	String	按钮名称，back - 返回，home - 首页
target	String	name=back时，target表示返回的目标： app - 拉起小程序的来源APP mp - 拉起当前小程序的其他小程序 self - 当前小程序（上一页）

CSS变量

FAQ