Navigator 自定义导航栏

自定义导航栏组件。

引入说明

TIP

import Navigator from '@dmall/jimoui-mp/components/CustomNavBar/CustomNavBar';

代码演示

TIP

<GACustomNavBar :navBarColor="bgColor" :position="'sticky'" @onInit="getStatusHeight">
    <view class="nav-head">
        <view class="navigation" :style="navStyle.navLeft">
            <view :style="navStyle.navBtn" @tap.stop="goBackCallBackFn ? goBackCallBackFn() : navigateJump('back')"></view>
            <view :style="navStyle.navBtn" @tap.stop="navigateJump('home')"></view>
        </view>

        <view class="title">{{ title }}</view>
    </view>
</GACustomNavBar>

属性

Navigator：

配置	用途	取值	使用描述
navBarColor	导航栏背景颜色	String	默认为transparent即透明。
backgroundImage	导航栏背景图片	String	默认为空。
backgroundSize	导航栏背景图布局形式	String	默认为100% 100%。
position	定位方式	String	默认为fixed，可选的方式包含 'absolute' 、'fixed' 、'static'、'sticky'
:zIndex	默认选中项的索引值	Number	默认为0。 传入项为需要选中的列表项在数组中的Index值。
@onInit	导航栏加载完成事件	Event	$event:{ statusBarHeight: number 状态栏高度值 ,navBarHeight: 导航区高度值,}

注意：

对于微信、支付宝小程序来说，导航栏的实现和Web端是完全不同的。因此在使用上也会有较大差异。

核心的区别在于，纯Web端的导航栏不能包含状态栏区域，而App端依赖Bridge方法获取状态栏信息，同时在Hybrid与Web端场景的导航栏几乎是规范统一的。

但是小程序的差异在于，获取状态栏依赖官方的systemInfo，而微信的getSystemInfo是一个执行效率极低的接口；而根据C端设计规范，导航区的高度是与小程序菜单按钮的尺寸是有关系的。

除此以外，粘性定位在小程序端的兼容性是比较差的，基本上不能直接使用。这些问题交给开发者，他们可能会写出性能各异，处理形式不同的代码。

综上所述，小程序端的导航栏的设计核心，在于提供一个占用了状态栏的容器区域，并且根据设计规范处理好胶囊按钮区与状态栏之间的间距。
开发者在使用该组件时，理论上，他仅需关注状态栏以下导航头区域的内容，是左对齐菜单、或是居中标题，或者是跟随滑动变更色调、透明度的固定导航条，都由开发者决定。
而不是像Web端的导航栏完全锁定设计规范，仅仅允许自定义右上角按钮区域的内容。