navbar 顶部导航栏

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-navbar": "@retailwe/ui-navbar/index",
}

代码演示

基础用法

<wr-navbar
  title="这个是自定义的"
  color="white"
  background="linear-gradient(90deg,#FF6B44 0%,#ED3427 100%)"
></wr-navbar>

带页面背景

如提供的图片高于预期，可使用offset-top隐藏图片的一部分

*注意：*自定义 navbar 的页面必须注册到 app.json，否则原生 navbar 不会去掉

{
  "navigationStyle": "custom" // 开启此配置后，才可用navbar组件替换原生navbar
  // 其他配置
}

随着页面滚动，使随背景图发生渐变 navbar

<wr-navbar id="navbar" title="navbar 自定义导航栏" color="white" background="linear-gradient(90deg,#FF6B44 0%,#ED3427 100%)" background-url="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/order/bg-after-service-refund.png?imageMogr2/crop/750x" size="50" back="{{checkStatus}}" offset-top="{{-176}}">
  <block wx:if="{{!checkStatus}}">
    <view slot="left" class="navigation">
      <wr-icon wr-class="navigation_home" name="home" bind:tap="navTo"/>
    </view>
  </block>
</wr-navbar>
<view class="navbar">
  <view class="navbar__title">{{changeable ? '尝试滚动页面到此处': ''}}</view>
  <view class="navbar__info">
    启用navbar背景渐变
    <wr-switch checked="{{changeable}}" bindon-change="onSwitch" />
  </view>
  <view class="navbar__info">
    自定义左侧图标
    <wr-switch checked="{{!checkStatus}}" bindon-change="changeBack" />
  </view>
</view>

Page({
  data: {
    changeable: false,
    checkStatus: true,
  },

  navbar: {} as WechatMiniprogram.Component.Instance<
    {},
    {},
    Record<string, any>
  >,

  onLoad() {
    this.navbar = this.selectComponent('#navbar');
  },

  onPageScroll(e: any) {
    if (!this.data.changeable) return;
    this.navbar.methods.onScroll.call(this.navbar, e.scrollTop);
  },
  navTo() {
    wx.navigateBack();
  },
  onSwitch() {
    this.setData(
      {
        changeable: !this.data.changeable,
      },
      () => {
        wx.showToast({
          icon: 'none',
          title: this.data.changeable ? `已开启渐变` : `已关闭渐变`,
        });
      },
    );
  },
  changeBack() {
    this.setData({
      checkStatus: !this.data.checkStatus,
    });
  },
});

API

loading Props

如需navbar保持背景透明，background属性传入'transparent'或空字符串即可。

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------- | ------------------------------------ | --------- | ------- | ---- | | title | 标题 | string | - | - | | color | 标题及返回按钮的颜色 | string | - | - | | background | 背景，可以是纯色、渐变色、图片 | string | - | - | | back | 是否显示返回按钮 | boolean | true | - | | delta | 返回的层级数 | number | 1 | - | | loading | 是否显示 loading 效果 | boolean | false | - | | show | 是否显示 navbar | boolean | true | - | | animated | 切换show时是否有渐变动画 | boolean | false | - | | backgroundUrl | 页面背景图片 | string | - | - | | offsetTop | 页面背景图向上偏移的距离，单位 rpx | number | 0 | - | | size | 左侧图标大小 | number | 32 |- |

Slots

| 名称 | 说明 | | ------ | --------- | | left | 左侧 slot | | center | 正中 slot | | right | 右侧 slot |

外部样式类

| 类名 | 说明 | | -------- | ------------ | | wr-class | 根节点样式类 |