@retailwe/ui-navbar NPM

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