JS-原生组件

原生栏介绍

导航栏、菜单栏、导航栏可以用预加载完成效果。

原生控制可以用URL进行控制,效果优于JS控制。JS是加载网页完成后生效。

导航栏显示/隐藏

BSL.AppTop('flag','isLong')
控制原生导航栏显示/隐藏

参数必填说明
flag固定值
isLong固定值

flag 值

编码说明
1显示导航栏
0隐藏导航栏

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
		BSL.AppTop('0','0') //当前页隐藏导航栏
        BSL.AppTop('0','1') //App内隐藏导航栏
	}
</script>

导航栏左侧按键

BSL.AppTopL('state','buttonImage','long')
控制原生导航栏左侧按键功能

参数必填说明
state固定值
buttonImage指定图标,图标大小60*60。不填写或加载失败时显示默认功能图标。图片网址要填写完整地址。如:http://www.xxx.com/1.png
long0:应用当前页面,1:应用所有页面

state 值

编码说明
0分享
1扫一扫
2关于
3清除缓存
4打开链接
5前进
6后退
7刷新
8关闭
9打开左侧栏
-1隐藏按钮
<script>
	function appFinishiLoad(){
            BSL.AppTopL('0','','0') //原生导航栏左侧设置为分享,使用默认图标。
	}
</script>

导航栏右侧按键

BSL.AppTopR('state','buttonImage','long')
控制原生导航栏右侧按键功能

参数必填说明
state固定值
buttonImage指定图标,图标大小60*60。不填写或加载失败时显示默认功能图标。图片网址要填写完整地址。如:http://www.xxx.com/1.png
long0:应用当前页面,1:应用所有页面

state 值

编码说明
0分享
1扫一扫
2关于
3清除缓存
4打开链接
5前进
6后退
7刷新
8关闭
9打开左侧栏
-1隐藏按钮
<script>
	function appFinishiLoad(){
            BSL.AppTopR('0','','0') //原生导航栏左侧设置为分享,使用默认图标。
	}
</script>

导航栏背景颜色

BSL.navbarColor('color','isLong')
控制原生导航栏背景颜色

参数必填说明
color16进制的颜色值,如 #FFC0CB
isLong固定值

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
            BSL.navbarColor('#FFC0CB','0') //临时改变原生导航栏背景色
	}
</script>

导航栏透明度

BSL.SetNavBarAlpha('alpha','isLong')
控制原生导航栏透明度。

参数必填说明
alpha固定值:0.01~0.99。0.01:为全透明菜单栏,0.99:不透明菜单栏。
isLong固定值

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
            BSL.SetNavBarAlpha('0.01','0') //临时改变原生导航栏为全透明。
	}
</script>

导航栏文字

BSL.SetTitleName(‘title’,‘color’)
控制原生导航栏显示文字与文字颜色

参数必填说明
title要显示的文字。
color16进制的颜色值,如 #FFC0CB
<script>
	function appFinishiLoad(){
            BSL.SetTitleName('封装App','#ffffff') //当页网页原生导航栏标题文字。
	}
</script>

导航栏滑动隐藏

BSL.SlideHideNav(‘flag’)
控制原生导航栏在网页滑动时隐藏效果。

参数必填说明
flag固定值

flag 值

编码说明
1开启
0关闭
<script>
	function appFinishiLoad(){
            BSL.SlideHideNav('0') //关闭网页滑动时原生导航栏隐藏。
	}
</script>

菜单栏显示/隐藏

BSL.AppBottom('flag','isLong')
控制原生菜单栏显示/隐藏

参数必填说明
flag固定值
isLong固定值

flag 值

编码说明
1显示菜单栏
0隐藏菜单栏

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
		BSL.AppBottom('0','0') //当前页隐藏菜单栏
        BSL.AppBottom('0','1') //App内隐藏菜单栏
	}
</script>

菜单栏背景颜色

BSL.tabbarColor('color','isLong')
控制原生菜单栏背景颜色

参数必填说明
color16进制的颜色值,如 #FFC0CB
isLong固定值

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
            BSL.tabbarColor('#FFC0CB','0') //临时改变菜单栏背景色
	}
</script>

菜单栏透明度

BSL.SetTabbarAlpha('alpha','isLong')
控制原生菜单栏透明度

参数必填说明
alpha固定值:0.01~0.99。0.01:为全透明菜单栏,0.99:不透明菜单栏。
isLong固定值

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
            BSL.SetTabbarAlpha('0.01','0') //临时改变菜单栏为全透明。
	}
</script>

菜单栏滑动隐藏

BSL.SlideHideTab(‘flag’)
控制原生菜单栏滑动页面时隐藏效果。

参数必填说明
flag固定值

flag 值

编码说明
1开启
0关闭
<script>
	function appFinishiLoad(){
            BSL.SlideHideTab('0') //关闭网页滑动时菜单栏隐藏。
	}
</script>

菜单栏按键控制

BSL.ChangeTabbar('json')
页面内JS控制菜单栏的某一按键功能,
:不能增减菜单按键只能更换按键功能。

参数必填说明
json菜单按键功能JSON数据

json 值

参数必填说明
itemId要修改按钮的位置。从左到右按键分别对应是0,1,2,3,4。
clickEvent点击菜单按键时页面加载方式,0:无变化,1:刷新,2:回首页
selectId要跳转的页面,跳转到指定的一个菜单页面。按键的id,从左到右,从0开始,即第一个为0。
style按键样式,1: 图文 ,2:图 , 3:文字
function按键功能,不写则功能不变,0分享,1二维码,2关于,3清除缓存,4打开链接,5前进,6后退,7刷新,8关闭,9打开左侧栏
name标题文字
url要改变的网址(和function项只有一个生效,url优先级高于function项)
title按键的名称
fontSize按键的名称的字体大小
imageDefault默认图片,填写完整地址。如:http://www.xxx.com/1.png:与imageSelect成对传值。可不传,不传时imageSelect也不传。
imageSelect选中图片,填写完整地址。如:http://www.xxx.com/1.png:与imageDefault成对传值。可不传,不传时imageDefault也不传。
colorDefault默认文字颜色,16进制的颜色值。如 #FFC0CB :与colorSelect成对传值。可不传,不传时colorSelect也不传。
colorSelect选中文字颜色,16进制的颜色值。如 #FFC0CB :与colorDefault成对传值。可不传,不传时colorDefault也不传。

json值:

{\\"itemId\\":0,\\"clickEvent\\":\\"0\\",\\"selectId\\":1,\\"style\\":\\"1\\",\\"function\\":\\"\\",\\"name\\":\\"百度\\",\\"url\\":\\"https://m.baidu.com/\\",\\"title\\":\\"首页\\",\\"fontSize\\":12,\\"imageDefault\\":\\"back\\",\\"imageSelect\\":\\"back\\",\\"colorDefault\\":\\"#00ff00\\",\\"colorSelect\\":\\"#0000ff\\"}
<script>
	function appFinishiLoad(){
	BSL.ChangeTabbar(‘{\"itemId\":0,\"clickEvent\":\"0\",\"selectId\":1,\"style\":\"1\",\"function\":\"\",\"name\":\"百度\",\"url\":\"https://m.baidu.com/\",\"title\":\"首页\",\"fontSize\":12,\"imageDefault\":\"back\",\"imageSelect\":\"back\",\"colorDefault\":\"#00ff00\",\"colorSelect\":\"#0000ff\"}’) //定义按键1
	}
</script>

原生侧边栏

BSL.AppLeft('state')
打开原生侧边栏

参数必填说明
state固定值:1,打开侧边栏。
<script>
	function appFinishiLoad(){
            BSL.AppLeft('1') 
	}
</script>

下拉刷新 关闭/开启

BSL.downRefresh('open','isLong')

参数必填说明
open固定值
isLong固定值

open值

编码说明
1开启
0关闭

isLong 值

编码说明
1全局有效
0当前页面有效
<script>
	function appFinishiLoad(){
            BSL.downRefresh('1','0'); // 开启当前页面下拉刷新。
	}
</script>

状态栏显示/隐藏

BSL.hideStateBar('state','flag')
控制状态栏(电池栏)显示/隐藏。

参数必填说明
state固定值
flag固定值

state值

编码说明
1显示
0隐藏

flag值

编码说明
1应用所有页面
0应用当前页面
<script>
	function appFinishiLoad(){
            BSL.hideStateBar('1','0') //显示状态栏
	}
</script>

状态栏字体颜色

BSL.StatusBarTextColor('state')
改变状态栏字体颜色

参数必填说明
state固定值

state值

编码说明
1黑色
0白色
<a href="#" onclick="BSL.StatusBarTextColor('1')">状态栏黑色字</a>
<a href="#" onclick="BSL.StatusBarTextColor('0')">状态栏白色字</a>


2020-03-04 16:46:43

在线客服