mx-nav,mx-nav-bar 导航栏

为页面提供导航功能，常用于页面顶部。MUI组件库提供了两个导航组件，nav-bar和nav组件。nav-bar组件是支持比较多的功能以及入参，nav则是在nav-bar的基础上进行了阉割，以更好的适应我们开发需求。nav性对于nav-bar，固定了导航在顶部，以及去掉右侧的所有属性设置和事件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-nav-bar": "/miniprogram_npm/m-ui/mx-nav-bar/index",
  "mx-nav": "/miniprogram_npm/m-ui/mx-nav/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

通过title添加标题的名称。

 <mx-nav-bar title="导航"  bind:click-left="onClickLeft">

Page({
  onClickLeft() {
    wx.showToast({ title: '点击返回', icon: 'none' });
  },
});

是否显示背景颜色，阴影，可以搭配背景渐变组件一起使用。默认背景是透明，页面滑动的时候添加背景色以及阴影。

<mx-bg-shade bind:shadescroll="scroll" bgColor="{{bgColor}}">
  <mx-nav-bar title="{{title}}" shadow bgColor="#E1E8F8" showBg="{{isShowBg}}" bind:click-left="onClickLeft">
  </mx-nav-bar>
  <view class="demo-nav-bar">
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
    <image class="nav-img" src="../../../assets/image/example/nav-bar/bg.png" />
  </view>
</mx-bg-shade>

Page({
  data: {
    title: 'nav 导航栏',
    isShowBg: true,
    bgColor: '#267AFF',
  },
 onClickLeft() {
    wx.navigateBack({
      delta: 1,
    })
  },
  //滑动页面控制头部组件颜色变化
  scroll(e) {
    console.log(e.detail.scrollTop)
    if (e.detail.scrollTop > 20) {
      this.setData({
        isShowBg: false,
      })
    } else {
      this.setData({
        isShowBg: true,
      })
    }
  },
});

page{
  overflow: hidden;
}
.demo-nav-bar image{
 width: 100%;
}

高级用法

通过 slot 定制内容。

<mx-nav-bar title="标题" left-text="返回" left-arrow>
  <mx-icon name="search" slot="right" />
</mx-nav-bar>

API

navbar Props

参数	说明	类型	默认值
title	标题	string	''
bg-color	背景颜色	string	#fff
show-bg	对否显示为透明背景	boolean	false
shadow	滑动的时候是否添加阴影	boolean	false
left-text	左侧文案	string	''
right-text	右侧文案	string	''
custom-style	根节点自定义样式	string	-
left-arrow	是否显示右侧箭头	boolean	true
fixed	是否固定在顶部	boolean	true
placeholder	固定在顶部时是否开启占位	boolean	true
border	是否显示下边框	boolean	false
z-index	元素 z-index	number	1
safe-area-inset-top	是否留出顶部安全距离（状态栏高度）	boolean	true

solt

名称	说明
title	自定义标题
left	自定义左侧区域内容
right	自定义右侧区域内容

Event

事件名	说明	参数
bind:click-left	点击左侧按钮时触发	-
bind:click-right	点击右侧按钮时触发	-

外部样式类

名称	说明
custom-class	根节点样式类
title-class	标题样式类