Swan-solution-components-navigation-bar NPM

解释：自定义导航条

属性说明：

属性名	类型	必填	默认值	说明
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'
            });
        }
    })

@infinitebrahmanuniverse/nolb-swan @everything-registry/sub-chunk-2861

5 years ago

5 years ago

5 years ago

5 years ago