# 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

# 属性

配置 用途 取值 使用描述
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属性,该事件不会触发。
  • iOS
  • Android
  • Web
  • MP
v1.0.0