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
熱門App插件
猜你喜歡
咨詢 . 試用
咨詢 . 試用