原生导航栏插件(底部、顶部)
原生导航栏插件包含顶部导航栏和底部导航栏。
顶部导航栏功能
带有标题和返回按钮的导航栏
底部导航栏功能
可设置如首页、个人中心,可以设置链接地址,图标。导航数量系统控制在5个以内,建议4个,一行一个
根据自己需求设置顶部导航、底部导航,或者两个都开启。
该插件提供全局变量LBNavigation,提供了动态设置标题栏的功能
LBNavigation
设置标题栏 LBNavigation.setHeader
LBNavigation.setHeader(title,fontcolor,bgcolor,successCallback,errorCallback)
参数:
title:标题栏的文本内容
fontcolor:标题栏字体颜色,十六进制
bgcolor:标题栏的背景颜色,十六进制
successCallback:成功时的回调方法
errorCallback:执行遇到错误触发的回调方法
javascript调用例子:
var title="首页"; var fcolor="#FFC125"; var bcolor="#6495ED"; LBNavigation.setHeader(title,fcolor,bcolor,function(){ alert("ok"); },function(){ alert("err"); })
设置标题栏返回键的颜色 LBNavigation.setBackIconColor
LBNavigation.setBackIconColor(color,successCallback,errorCallback)
参数:
color:返回键的颜色,字符串类型, 例如,"white","black","gray"
successCallback:成功时的回调方法
errorCallback:执行遇到错误触发的回调方法
javascript调用例子
LBNavigation.setBackIconColor("black",function(){ alert("success"); },function(){ alert("err"); })
注意:目前返回键颜色设置 仅支持三种颜色参数:"white","black","gray"
隐藏标题栏 LBNavigation.hideHeader
LBNavigation.hideHeader(successCallback,errorCallback)
参数:
successCallback:成功时的回调方法
errorCallback:执行遇到错误触发的回调方法
javascript调用例子
LBNavigation.hideHeader(function(){ alert("hide success"); },function(){ alert("err"); })
查看标题栏是否显示 LBNavigation.isShowedHeader
LBNavigation.isShowedHeader(successCallback,errorCallback)
参数:
successCallback:成功时的回调方法,返回一个布尔值,true则显示,false则隐藏
errorCallback:执行遇到错误触发的回调方法
javascript调用例子
LBNavigation.isShowedHeader(function(status){
alert(status); //true则显示,false则隐藏
},function(){
alert("err");
})
下面介绍具体配置操作
首先在插件配置步骤找到原生导航栏进入配置
顶部导航设置
底部导航设置
效果
1