在原生的TitleNView画图标或是按钮

最新推荐文章于 2023-08-09 18:11:13 发布

转载最新推荐文章于 2023-08-09 18:11:13 发布 · 6.1k 阅读

文章标签：

#hbuilder

移动开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在H5+应用中自定义标题栏的图标和按钮，包括使用图片和字体图标作为图标，以及如何在标题栏上添加可交互的按钮，并绑定点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//获取TitleNView
var titleView = plus.webview.currentWebview().getTitleNView();

//有两种方法可以在原生的TitleNView画图标
//方法1.用绘制的方式，绘制的方式又有两种
var tags = [
{//用图片做图标
id:‘img’,
tag:‘img’,//*
src:‘images/qq.png’,//*
position:{
top: “10px”,
left: “10px”,
width: “24px”,
height: “24px”
}
},
{//用字体图标
id:‘font’,
tag:‘font’,//*
text:’\ue101’,//按钮的文本是使用unicode字符的，参考http://ask.dcloud.net.cn/article/12610
position:{
top: “10px”,
left: “40px”,
width: “24px”,
height: “24px”
},
textStyles: {
fontSrc:‘fonts/mui.ttf’, //*
align:‘center’,
size:‘24px’
}
}
]；
//1.1直接绘制
titleView.draw(tags);
//1.2通过setStyle绘制
plus.webview.currentWebview().setStyle({
titleNView:{
‘backgroundcolor’: ‘#f7f7f7’,
‘titletext’: ‘iflower’,
‘titlecolor’: ‘#000000’,
tags:tags
}
});

//方法2.在TitleNView上加按钮
plus.webview.currentWebview().setStyle({
titleNView:{
‘backgroundcolor’: ‘#f7f7f7’,
‘titletext’: ‘iflower’,
‘titlecolor’: ‘#000000’,
buttons:[{
text:’\ue502’,
fontSrc:‘fonts/mui.ttf’,
float:‘right’, //按钮不像绘制的方法，是不能用position绝对定位的，只能左右浮动
onclick:clickButton //按钮有个好处可以直接绑定事件，如果没有事件，跟绘制没有差别了。
}]
}
});
//buttons的属性请参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
// 点击自定义按钮回调函数
function clickButton(){
plus.nativeUI.alert(‘clicked!’);
}