navigation 自定义导航

navigation 自定义导航

解释：顶部自定义的导航栏，支持配置返回首页、上一页按钮，和滑动切换效果主题。设计文档详见顶部导航栏。

属性说明

属性名	类型	必填	默认值	说明
type	String	否	default	自定义导航类型。default：默认，switchNav：切换导航栏模式。注：切换模式下，常规参数均配置在 commonBar 和 fixedBar 中
backgroundColor	String	否	#fff	导航背景色
frontColor	String	否	#000	前景颜色（目前特指字体颜色）
opacity	Number	否	1	导航背景透明度
navigationStyle	Object	否	{}	导航容器自定义样式（加在行间样式上）
navigationAreaStyle	Object	否	{}	导航内容可视区自定义样式（加在行间样式上）
backIcon	Boolean	否	false	是否显示返回图标
homeIcon	Boolean	否	false	是否显示首页图标
backIconSize	String	否	35.02rpx	返回图标大小
homeIconSize	String	否	35.02rpx	显示首页图标大小
backHdl	EventHandle	否	无	点击返回图标的回调事件
homeHdl	EventHandle	否	无	点击首页图标的回调事件
isFullScreenWidth	Boolean	否	false	宽度是否撑满屏幕
switchStartPosition	Number	否	statusBarHeight （计算得来的默认状态栏的高度）	切换模式下，导航栏切换的起始位置，默认状态栏的高度
switchEndPosition	Number	否	100	切换模式下，导航栏切换切换结束的位置
commonBar	Object	否	{ ‘isFullScreenWidth’: true, ‘opacity’:1, ‘title’:’’, ‘frontColor’:’#000’, ‘bgColor’:’#fff’, ‘backIcon’:true, ‘homeIcon’:false, ‘navigationStyle’:{}, ‘navigationAreaStyle’:{}}	切换模式下，初始的导航样式
fixedBar	Object	否	{ ‘isFullScreenWidth’: true, ‘opacity’:1, ‘title’:’fixed’, ‘frontColor’:’#000’, ‘bgColor’:’pink’, ‘backIcon’:true, ‘homeIcon’:false, ‘navigationStyle’:{}, ‘navigationAreaStyle’:{}}	切换模式下，滚动后的导航样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：type 默认为 default（默认模式）

SWAN
JS
CSS
JSON

<smt-navigation
    backIcon="{{backIcon}}"
    homeIcon="{{homeIcon}}"
    bindbackHdl="backHandler"
    bindhomeHdl="homeHandler"
>
   <text>顶部标题</text>
</smt-navigation>

代码示例 2：type默认为switchNav（切换模式）

SWAN
JS
CSS
JSON

<smt-navigation
    type="switchNav"
    commonBar="{{commonBar}}"
    fixedBar="{{fixedBar}}"
    bindbackHdl="backHandler"
    bindhomeHdl="homeHandler"
    switchStartPosition="{{1000}}"
>
</smt-navigation>