mp-nav-bar 导航栏

支持大部分场景的顶部导航栏组件，强烈建议始终在项目使用

代码演示

由于组件的参数较多，以下仅演示部分重要的场景。

基本使用

<mp-nav-bar title="常见问题" />

不占位

<mp-nav-bar background-color="transparent" :placeholder="false" title="详情" />

滚动变化背景颜色

你可以通过 enable-scroll-change-background 属性开启滚动到某个阈值时更新背景颜色，默认阈值为 10px。如果需要修改阈值，可以使用 scroll-threshold 属性：

<mp-nav-bar
  background-color="transparent"
  enable-scroll-change-background
  scroll-background-color="#ff0000"
  :placeholder="false"
  title="详情"
/>

默认的滚动模式是在达到阈值后才开始改变颜色，但你也可以通过关闭 scroll-change-background-directly 属性来启用实时变化效果，根据当前滚动距离与阈值之间的百分比来计算透明度，使导航栏的背景颜色能实时从全透明到不透明变化：

<mp-nav-bar
  background-color="transparent"
  enable-scroll-change-background
  :placeholder="false"
  :scroll-change-background-directly="false"
  :scroll-threshold="44"
  title="详情"
/>

暂不支持在 webview 页面内使用 mp-nav-bar

当页面内使用 webview 组件时，不支持使用 mp-nav-bar，需将页面的 navigationStyle 设置为 default，启用默认 navbar

pages.json

{
  "pages": {
    {
      "path": "pages/webview/index",
      "style": {
        "navigationStyle": "default"
      }
    },
  }
}

API

Props

Prop name	Description	Type	Values	Default
fixed	是否固定在顶部	boolean	-	true
placeholder	固定在顶部时是否开启占位	boolean	-	true
titleAlign	标题对齐方式	string	left, center, right	'center'
mode	主题模式 当模式为 auto 的时，会根据 backgroundColor 自动计算对应的主题模式	string	dark, light, auto	'auto'
showIcon	是否显示左侧 icon	boolean	-	true
backIcon	返回上一页图标，默认根据前景色切换	string	-	''
homeIcon	返回首页图标，默认根据前景色切换	string	-	''
homePath	首页路径	string	-	'/pages/index/index'
leftText	左侧文案	string	-	''
leftTextColor	左侧文案颜色，默认跟随主题色	string	-	''
title	标题	string	-	''
scrollTitle	滚动时标题	string	-	''
titleFontSize	标题文字大小	number	-	34
titleColor	标题文字颜色，默认跟随主题色	string	-	''
backgroundColor	背景颜色	string	-	'#ffffff'
scrollBackgroundColor	滚动时背景颜色	string	-	'#fff'
underColor	当导航栏背景颜色透明时，为确保前景色能够正常自动匹配，可以通过该属性传入页面顶部真实的背景色	string	-	'#fff'
backgroundImage	背景图片	string	-	''
scrollBackgroundImage	滚动时背景图片	string	-	''
enableScrollChangeBackground	是否开启监听滚动实时变更颜色	boolean	-	false
scrollThreshold	滚动阈值	number	-	10
scrollChangeBackgroundDirectly	用于设置滚动到指定阈值时如何改变背景颜色。若设置为 true，则在触达阈值时立即更新背景；若为 false，则在滚动过程中根据当前滚动距离与阈值的比例实时调整透明度	boolean	-	true
logo	logo 图片	string	-	''
logoStyle	logo 样式	object|string	-	() => ({ width: '80px', })
backDelta	返回上一页时返回到第几层	number	-	1
fadeDuration	动画时间	number	-	300
fadeTimingFunc	动画函数	string	linear, ease-in, ease-out, none	'ease-out'
clickLeft	点击左侧回调函数或 null	union	-	null
clickTitle		union	-	null

Slots

Name	Description	Bindings
homeIcon	home-icon 位置	frontColor string - 前景色
backIcon	back-icon 位置	frontColor string - 前景色
leftText	left-text 位置	frontColor string - 前景色
logo	logo 位置	frontColor string - 前景色
title	title 位置	frontColor string - 前景色

源码

组件 • 示例