swan-solution-components-navigation-bar
v1.0.3
Published
自定义导航栏
Readme
解释:自定义导航条
属性说明:
|属性名 | 类型 | 必填 | 默认值 |说明 | |---|---|---|---| |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'
});
}
})