npm package: @retailwe/ui-navbar
Description: ## 引入
Latest version: 0.0.24

# navbar 顶部导航栏

## 引入

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

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

## 代码演示

### 基础用法

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

### 带页面背景

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

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

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

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

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

```

```js
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 | 根节点样式类 |