swan-solution-components-navigation-bar

解释：自定义导航条

属性说明：

|属性名 | 类型 | 必填 | 默认值 |说明 | |---|---|---|---| |page-title |String |是|-|页面标题| |status-bar-height |num |是|20|状态栏的高度，使用时通过swan.getSystemInfoSync().statusBarHeight获取| |navigation-bar-height |num |是|44|导航栏的高度，使用时通过swan.getSystemInfoSync().navigationBarHeight获取| |color-type |String |否|dark|字体颜色类型，有深色和浅色，分别为dark、light| |need-to-return |Boolean |否|false|返回上一页的按钮| |need-to-home |Boolean |否|false|返回首页的按钮| |show-title |Boolean |否|true|是否显示标题| |opacity-bar |Boolean |否|false|是否设置透明| |bindgotohome|Function|否|-|返回首页，当need-to-home为true时需要此函数,用法参见下面示例|

示例

json:

    {
        "navigationBarTitleText": "标题",
        "navigationStyle": "custom",
        "usingComponents": {
            "navigation-bar": "/components/navigation-bar/navigation-bar"
        }
    }

swan:

    <view>
        <navigation-bar
            opacity-bar="{{opacityBar}}"
            need-to-return="{{isNeedToReturn}}"
            need-to-Home="{{isNeedToHome}}"
            color-type="{{arrowColor}}"
            show-title="{{showTitle}}"
            status-bar-height="{{statusBarHeight}}"
            navigation-bar-height="{{navigationBarHeight}}"
            page-title="{{detailData.plateInfo.name}}"
            bindgotohome="goToHome">
        </navigation-bar>
    </view>

js:

    Page({
        data: {
            // 状态栏的高度
            statusBarHeight: '',
            // 导航栏的高度
            navigationBarHeight: '',
            opacityBar: true,
            showTitle: true,
            isNeedToHome: true,
            isNeedToReturn: true,
            showOpacity: true
        },
        onLoad(options) {
            let {statusBarHeight, navigationBarHeight} = swan.getSystemInfoSync();
            this.setData({
                statusBarHeight,
                navigationBarHeight
            });
        },
        goToHome() {
            swan.reLaunch({
                url: '/pages/index/index'
            });
        }
    })