# Navigator
顶部导航基础样式及配置,保持页面的一致性
# 引入说明
TIP
import Navigator from "jimoui/components/Navigator/Navigator"
1
# 代码演示
TIP
具备基础样式,但不建议您手动修改。如果该组件无法实现您的需求,建议自行实现。
//基础用法
<Navigator title="标题文案" showCart showShare></Navigator>
<Navigator type="light" title="" showCart></Navigator>
//使用插槽
<Navigator title="">
<div>
<i class="slotIcon share"></i>
<i class="slotIcon cart"></i>
<i class="slotIcon messag"></i>
</div>
</Navigator>
<Navigator type="light" title="标题文案">
<span class="slotText">点击文案</span>
</Navigator>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
type | 配色类型 | dark/light | 默认dark light为橙色底白色文字 dark为白色底黑色文字 |
fixed | 定位类型 | / | 该属性无需传入属性值 声明该属性时,导航栏为固定定位,默认为粘性定位。 |
:bgColor | 背景色 | String | 色值单位。 |
:secondBgColor | 渐变色结束 | String | 同时传入bgColor与该属性时,背景色为渐变色。单独传入该属性无任何效果。 |
showCart | 是否展示购物车 | / | 展示购物车时,将默认展示购物车内商品总数 |
showShare | 是否展示分享 | / | / |
:bgImage | 背景图片 | / | 导航栏背景图。 |
:title | 标题文字 | / | 标题栏文字。 |
:shareParams | 分享参数 | / | / |
:activeCartNum | 动态设置的购物车角标数量 | Number | 当页面中执行了加购操作,并得到了购物车内商品总数时,可以通过传入这个Prop值来动态修改右上角显示的数量。 |
@onTitleInit | 初始化结束事件 | Event | $event:statusHeight 为状态栏高度。 头部渲染完成时,执行回调函数,并返回当前状态栏的高度。 |
@getNavHeight | 获取导航栏高度(不包括状态栏) | Event | $event:navigatorHeight 为导航栏高度。 |
@tapBack | 返回按钮点击getCartNum | Event | $event 可以执行一部分判断操作,再行返回 当传入了该方法,默认的返回操作将被屏蔽,开发者需自行处理返回逻辑。 |
@tapTitle | 标题点击 | Event | $event |
@onShared | 分享完成事件 | Event | $event 分享完成回调通知。 |
@onCartInit | 购物车加载完成事件 | Event | $event:count 购物车内商品总数 如果不传入showCart属性,该事件不会触发。 |