HiUi

Appearance

基础使用 ​

默认高度：44px
默认背景：pages.json -> 页面设置 -> navigationBarBackgroundColor || pages.json -> globalStyle -> navigationBarBackgroundColor
默认标题颜色：pages.json -> 页面设置 -> navigationBarTextStyle || pages.json -> globalStyle -> navigationBarTextStyle

vue
<hi-navigation-bar></hi-navigation-bar>

标题居左 ​

标题默认剧中，设置 align="left" 可以让标题居左。

vue
<hi-navigation-bar align="left"></hi-navigation-bar>

自动标题 ​

通过 autoTitle 开启自动标题，默认开启。
开启后如果未设置 title 属性，会显示在 pages.json 对应页面中配置的 style.navigationBarTitleText，如果 style.navigationBarTitleText 也没有配置，则会继续寻找 pages.json 中配置的 globalStyle.navigationBarTitleText。

vue
<hi-navigation-bar autoTitle></hi-navigation-bar>

返回按钮 ​

通过 showBack 属性设置返回按钮，默认显示。

vue
<hi-navigation-bar showBack></hi-navigation-bar>

自动返回 ​

通过 autoBack 属性设置点击返回按钮后自动返回，默认开启。

vue
<hi-navigation-bar autoBack></hi-navigation-bar>

自动返回按钮 ​

通过 autoShowBack 属性设置自定判断是否显示返回按钮。判断逻辑为：当前页面是 tabBar 页面或 getCurrentPages().length <= 1 时，不显示返回按钮，否则显示

vue
<hi-navigation-bar autoShowBack></hi-navigation-bar>

菜单按钮 ​

通过 leftMenu 和 rightMenu 属性设置菜单按钮。数据格式如下

js
[
    {
        class: "", // 按钮的 class"
        style: "", // 按钮样式
        hoverClass: "", // 按钮的 hover-class
        iconName: "", // 图标名称
        text: "", // 文字
    },
];
vue
<hi-navigation-bar :leftMenu="leftMenu" :rightMenu="rightMenu"></hi-navigation-bar>

Props ​

参数说明类型默认值可选值
hoverClass组件中按钮的 hover-classStringhi-hover-
title标题String--
autoTitle自动标题Booleantrue-
align标题对齐方式Stringcenterleft、center
showBack显示返回按钮Booleantrue-
autoShowBack自动返回按钮Booleantrue-
backText返回按钮文字String--
backIconName返回按钮图标名称String__zuo-
leftMenu左侧菜单Array[]-
rightMenu右侧菜单Array[]-

Events ​

事件名称说明回调参数
@back点击返回按钮触发-
@menuClick点击菜单按钮触发menu: 菜单按钮数据； index: 菜单按钮下标；type: 菜单按钮位置，left 或 right
@leftMenuClick点击左侧菜单触发menu: 菜单按钮数据； index: 菜单按钮下标；
@rightMenuClick点击右侧菜单触发menu: 菜单按钮数据； index: 菜单按钮下标；

Slots ​

名称说明参数
#back返回按钮插槽-
#left左侧菜单插槽-
#right右侧菜单插槽-
#title标题插槽title: 标题
#toptitle 和 body 之间的不跟随滚动内容插槽-
#bottomfooter 和 body 之间的不跟随滚动内容插槽-