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
long	是	0：應用當前頁面，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
long	是	0：應用當前頁面，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')
控制原生導航欄背景顏色

參數	必填	說明
color	是	16進制的顏色值，如 #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	否	要顯示的文字。
color	是	16進制的顏色值，如 #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')
控制原生菜單欄背景顏色

參數	必填	說明
color	是	16進制的顏色值，如 #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

<< JS-原生登錄，QQ，微信，微博 JS-掃一掃 >>

熱門App插件

原生欄介紹

導航欄顯示/隱藏

導航欄左側按鍵

導航欄右側按鍵

導航欄背景顏色

導航欄透明度

導航欄文字

導航欄滑動隱藏

菜單欄顯示/隱藏

菜單欄背景顏色

菜單欄透明度

菜單欄滑動隱藏

菜單欄按鍵控制

原生側邊欄

下拉刷新關閉/開啟

狀態欄顯示/隱藏

狀態欄字體顏色

專屬客服

關注動態

原生欄介紹

導航欄顯示/隱藏

導航欄左側按鍵

導航欄右側按鍵

導航欄背景顏色

導航欄透明度

導航欄文字

導航欄滑動隱藏

菜單欄顯示/隱藏

菜單欄背景顏色

菜單欄透明度

菜單欄滑動隱藏

菜單欄按鍵控制

原生側邊欄

下拉刷新 關閉/開啟

狀態欄顯示/隱藏

狀態欄字體顏色

專屬客服

關注動態

下拉刷新關閉/開啟