原生导航栏插件(底部、顶部)

原生导航栏插件包含顶部导航栏和底部导航栏。

顶部导航栏功能

带有标题和返回按钮的导航栏

底部导航栏功能

可设置如首页、个人中心,可以设置链接地址,图标。导航数量系统控制在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.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