MUI、HTML5+、HBuilder實現透明漸變導航欄+自定義按鈕(右上角分享按鈕)

先上效果圖:

js代碼:

mui.plusReady(function() {
			var ws = plus.webview.currentWebview();
			ws.setStyle({
				"titleNView":{
					backgroundColor: '#f7f7f7',//導航欄背景色
                    titleText: '透明漸變(native模式)',//導航欄標題
				    titleColor: '#000000',//文字顏色
				    type:'transparent',//透明漸變樣式
				    buttons:[{
				    	text:'',
				    	float:'right',
				    	type:'share',
				        onclick:"javascript:plus.webview.currentWebview().evalJS('shareHref();')"
				    }],
				    autoBackButton: true,//自動繪製返回箭頭
				    splitLine:{//底部分割線
				        color:'#cccccc'
				    }
				}
			})
		})

html代碼:

<body>
		<div class="mui-content">
			<!--頂部banner圖 開始-->
			<div id="kr-article-banner" class="kr-article-banner">
				<div id="kr-article-cover" class="kr-article-cover">
					<img width="100%" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBE00AN0001NOS.jpg">
				</div>
				<h2 id="kr-article-title" class="kr-article-title">首對“海歸”大熊貓雙胞胎回到中國</h2>
			</div>
			<!--頂部banner圖 結束-->
			
			<div class="kr-article-content">
				<!-- 文章作者、發佈時間等信息 -->
				<div class="kr-article-meta">
					<div id="kr-article-author" class="kr-article-author">中國新聞網</div>
					<div class="kr-article-text">發表於</div>
					<div id="kr-article-time" class="kr-article-time">2018-12-05 04:22</div>
				</div>
				<!--文章詳細內容-->
				<div id="kr-article-article" class="kr-article-article" v-html="content">
					<p>&nbsp;&nbsp;&nbsp;&nbsp;12月4日,旅奧大熊貓龍鳳胎“福鳳”“福伴”順利回到中國大熊貓保護研究中心,入住臥龍神樹坪基地隔離檢疫區,成爲首對“海歸”大熊貓雙胞胎。大熊貓“福鳳”“福伴”於2016年8月7日在奧地利美泉宮動物園出生。大熊貓“福鳳”爲雌性,體重60kg,愛吃竹筍和紅薯,比較貪玩。 大熊貓“福伴”爲雄性,體重55kg,喜歡攀爬、玩雪,對一切新鮮的事物都充滿好奇心,社交能力強。(來源:中國新聞網)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBF00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;工作人員卸下裝有大熊貓的籠舍。(來源:中國新聞網)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBG00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;工作人員引誘大熊貓出籠。(來源:中國新聞網)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBH00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;大熊貓“福鳳”在保護研究中心都神樹坪基地開始熟悉環境。(來源:中國新聞網)</p><img style="max-width:800px;" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBI00AN0001NOS.jpg"><br>&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;&nbsp;&nbsp;&nbsp;大熊貓“福鳳”“福伴”在在保護研究中心神樹坪基地。(來源:中國新聞網)</p><p></p>
				</div>
			</div>
		</div>
	</body>

參數:

窗口標題欄自定義按鈕樣式

屬性:

  • type: (String 類型 )按鈕樣式

    運行環境中內置按鈕樣式直接使用,內置樣式忽略fontSrc和text屬性。 可取值: "forward" - 前進按鈕; "back" - 後退按鈕; "share" - 分享按鈕; "favorite" - 收藏按鈕; "home" - 主頁按鈕; "menu" - 菜單按鈕; "close" - 關閉按鈕; "none" - 無樣式。 默認值爲無樣式("none"),需通過text屬性設置按鈕上顯示的內容、通過fontSrc屬性設置使用的字體庫。

  • color: (String 類型 )按鈕上文字顏色

    可取值: "#RRGGBB"格式字符串,如"#FF0000"表示繪製紅色返回鍵; "rgba(R,G,B,A)",其中R/G/B分別代表紅色值/綠色值/藍色值,正整數類型,取值範圍爲0-255,A爲透明度,浮點數類型,取值範圍爲0-1(0爲全透明,1爲不透明),如"rgba(255,0,0,0.5)",表示紅色半透明。 默認值爲窗口標題欄控件的標題文字顏色。

  • colorPressed: (String 類型 )按下狀態按鈕文字顏色

    可取值: "#RRGGBB"格式字符串,如"#FF0000"表示繪製紅色返回鍵; "rgba(R,G,B,A)",其中R/G/B分別代表紅色值/綠色值/藍色值,正整數類型,取值範圍爲0-255,A爲透明度,浮點數類型,取值範圍爲0-1(0爲全透明,1爲不透明),如"rgba(255,0,0,0.5)",表示紅色半透明。 默認值爲color屬性值自動調整透明度爲0.3。

  • float: (String 類型 )按鈕在標題欄上的顯示位置

    可取值: "right" - 在標題欄中靠右排列顯示; "left" - 在標題欄中靠左側排列顯示(在返回鍵後)。 默認值爲"right"。

  • fontWeight: (String 類型 )按鈕上文字的粗細

    可取值: "normal" - 標準字體; "bold" - 加粗字體。 默認值爲"normal"。

  • fontSize: (String 類型 )按鈕上文字大小

    可取值:字體高度像素值,數字加"px"格式字符串,如"22px"。 窗口標題欄爲透明樣式(type="transparent")時,默認值爲"22px"; 窗口標題欄爲默認樣式(type="default")時,默認值爲"27px"。

  • fontSrc: (String 類型 )按鈕上文字使用的字體文件路徑

    字體文件路徑支持以下類型: 相對路徑 - 相對於當前頁面的host位置,如"a.ttf",注意當前頁面爲網絡地址則不支持; 絕對路徑 - 系統絕對路徑,如Android平臺"/sdcard/a.ttf",此類路徑通常通過其它5+ API獲取的; 擴展相對路徑URL(RelativeURL) - 以"_"開頭的相對路徑,如"_www/a.ttf"; 本地路徑URL - 以“file://”開頭,後面跟隨系統絕對路徑。

  • onclick: (WebviewCustomButtonCallback 類型 )按鈕點擊後觸發的回調函數

    回調函數中將返回此JSON對象。

  • text: (String 類型 )按鈕上顯示的文字

    推薦使用一個字符,超過一個字符可能無法正常顯示,使用字體圖標時unicode字符表示必須'\u'開頭,如"\ue123"(注意不能寫成"\e123")。

官方參考文檔:http://ask.dcloud.net.cn/article/1246

http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章