ifanrx 工具库

Appearance

导航栏 - mp-nav-bar ​

自定义页面导航栏是开发中很常见的需求，我们建议统一使用 mp-nav-bar 实现，以下是它的用法介绍。

使用方法 ​

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

基本使用 ​

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

不占位 ​

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

滚动变化背景颜色 ​

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

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

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

html
<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

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

相关文档 ​