Nav顶部导航

常用于页面顶部的导航，返回页面等场景。

标题内容支持居中、居左显示，支持自定义图片，图标支持自定义颜色、图标、图片、事件，左侧支持第2个图标。

示例图

基础用法

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-nav": "/components/mxwui/nav/index"
    }
}

页面 .wxml 文件中使用组件

<mx-nav title="页面标题" />

更多用法示例

主题 theme

属性：theme，可选值：light、dark，默认 dark 深色主题。

• light 浅色主题（白底黑字）

<mx-nav theme="light" />

• dark 深色主题（主题色白字）

<mx-nav theme="dark" />

导航栏背景色 bgColor

属性：bgColor，默认为 #FFFFFF，会根据不同主题色进行调整，支持任何合法的颜色值。

<mx-nav bgColor="#1677FF" />

标题 title

属性：title，自定义标题。

<mx-nav title="首页" />

标题文本色 titleColor

属性：titleColor，支持任何合法的颜色值。

当 light 浅色主题时，默认为 #FFFFFF。

当 dark 深色主题时，默认为 #040A23。

<mx-nav titleColor="#00f" />

标题自定义图片 titleImg

属性：titleImg，自定义图片地址，传了则 title 和 titleColor 无效。

<mx-nav titleImg="https://cdn.mingsixue.com/xcx/MXWUI/mxwui.png" />

标题是否居左 isLeft

属性：isLeft，默认 false 不居左，默认标题居中。

• 标题居中

<mx-nav isLeft="{{false}}" />

<mx-nav />

• 标题居左

<mx-nav isLeft />

<mx-nav isLeft="{{true}}" />

是否显示左侧图标 isHideIcon

属性：isHideIcon，默认 true 显示。

• 显示

<mx-nav />

<mx-nav isHideIcon />

<mx-nav isHideIcon="{{true}}" />

• 不显示

<mx-nav isHideIcon="{{false}}" />

自定义图标 iconName

属性：iconName，图标库中图标名称。

当可返回上一页时默认图标为 arrows_left，没有可返回的上一页时为 home。

<mx-nav iconName="circle_left_fill" />

自定义图标颜色 iconColor

属性：iconColor，默认颜色会根据主题进行切换，主题 dark 时为 #040A23，light 时为 #FFFFFF。

<mx-nav iconColor="#0f0" />

图标使用自定义图片 iconImg

属性：iconImg，自定义图片地址，传入则 iconName 和 iconColor 无效。

<mx-nav iconImg="https://cdn.mingsixue.com/xcx/MXWUI/hot.png" />

自定义图标事件 isCustomIconHandle

属性：isCustomIconHandle，默认 false 不开启自定义事件。

事件：bind:nav_icon_tap，图标点击事件。

会根据是否有上一级页面来决定是返回上一级页面还是跳转到首页，当定义 isCustomIconHandle 字段后会开启自定义事件，通过 bind:nav_icon_tap 事件接收，不再处理默认跳转的逻辑，需要自行处理。

<mx-nav isCustomIconHandle bind:nav_icon_tap="iconTap" />

设置第二个图标

属性：secondIconName，第二个图标名称，只支持图标库中图标名称。

属性：secondIconColor，第二个图标的颜色，支持任何合法的颜色值。

属性：secondIconImg，第二个图片自定义图片，传入后 secondIconName 和 secondIconColor 无效。

事件：bind:nav_second_icon_tap，第二个图标点击事件

• 自定义图标

<mx-nav secondIconName="filter" secondIconColor="#00f" bind:nav_second_icon_tap="secondIconTap" />

• 自定义图片

<mx-nav secondIconImg="https://cdn.mingsixue.com/xcx/MXWUI/set.png" bind:nav_second_icon_tap="secondIconTap" />

层级 zIndex

属性：zIndex，默认 519，因为Mask组件层级是520，需要比它小。

<mx-nav zIndex="1" />

导航透明

需要透明导航的话，设置 title=""，bgColor="transparent" 和 isHideIcon="{{false}}"。

<mx-nav title="" bgColor="transparent" isHideIcon="{{false}}" />

参数

事件

可修改常量

可在 src/components/mxwui/utils/common.js 中修改

其他说明

• 如果需要改变状态栏颜色，请在页面的配置文件中修改，值只支持 white / black

{
    "navigationBarTextStyle": "black"
}