n***@gmail.com
n***@gmail.com
  • 发布:2017-06-28 18:55
  • 更新:2019-11-05 10:51
  • 阅读:10431

如何更新通过nativeObj.View创建的view控件教程

分类:5+ SDK

需求说明

此教程将针对使用new plus.nativeObj.View() 创建的view对象如何更新作出详细说明;

创建示例

var currWV = plus.webview.currentWebview(),  
	leftPos =  Math.ceil((window.innerWidth - 60) / 2);  
  
var drawNativeIcon = new plus.nativeObj.View('tabIcon', {  
	bottom: '10px',  
	left: leftPos + 5 + 'px',  
	width: '50px',  
	height: '50px',  
	position:'dock'   //此种停靠方式表明该控件应浮在窗口最上层,以免被其他窗口遮住  
}, [{  
	tag: 'rect',  
	id: 'iconBg',  
	position: {  
		top: '0px',  
		left: '0px',  
		width: '50px',  
		height: '100%'  
	},  
	rectStyles: {  
		color: '#d74b28',  
		size: '50px',  
		radius:'50%'  
	}  
},{  
	tag: 'font',  
	id: 'icon',  
	text: '\ue600',  //此为字体图标Unicode码'\e600'转换为'\ue600'  
	position: {  
		top: '0px',  
		left: '0px',  
		width: '50px',  
		height: '100%'  
	},  
	textStyles: {  
		fontSrc: '_www/fonts/iconfont.ttf',  
		align:'center',  
		color: '#fff',  
		size: '30px'  
	}  
}]);  
  
currWV.append(drawNativeIcon);

实现更新方法

使用nativeObj提供的方法更新

通过 nativeObj 提供的 draw/drawBitmap/drawRect/drawText 方法对指定id重新绘制

说明:在当前View控件之上绘制指定的内容,可一次指定绘制多个元素,绘制元素可以是图片/矩形区域/文本, 即将多次调用drawBitmap/drawRect/drawText方法合并调用一次draw方法来实现, 推荐使用draw方法来替换多次调用drawBitmap/drawRect/drawText。

  
// 当前view控件需要更新的tags  
drawNativeIcon.draw(tags);  
  
// 更新指定id  
drawNativeIcon.drawRect(styles, position, id) //绘制元素为矩形区域  
drawNativeIcon.drawBitmap(src, sprite, position, id)  //绘制元素为图片  
drawNativeIcon.drawText(text, position, styles, id)  //绘制元素为文本,包括字体图标  
  
// 比如更新drawNativeIcon 控件的纯色背景颜色  
drawNativeIcon.drawRect({  
					color: '#0ff',  
					radius: '50%'  
				}, {}, 'iconBg');  
  
// 比如更新drawNativeIcon 控件的字体图标颜色  
drawNativeIcon.drawText('\ue600', {}, {  
					color: '#ccc',  
					fontSrc: '_www/fonts/iconfont.ttf',  
					size: '30px'  
				}, 'icon');  
  
// 使用draw方法  
drawNativeIcon.draw([  
	{  
		id: 'iconBg',  
		tag:'rect',  
		rectStyles: {  
			color: '#ff0',    
			size: '50px',  
			radius: '50%'  
		}  
	}, {  
		id: 'icon',  
		tag:'font',  
		text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'  
		textStyles: {  
			fontSrc: '_www/fonts/iconfont.ttf',  
			align: 'center',  
			color: '#000',  
			size: '30px'  
		}  
	}  
])  

说明:
1.position 的默认值为 {top:'0px',left:'0px',width:'100%',height:'100%'},如果与默认值相同,可以传空对象。
2.需要更新的tag 如果与默认值不相同,需要重新传值。

使用webview提供的方法更新

此方法使用 webview 提供的updateSubNViews()更新控件,是集成了nativeObj方法给webview提供一个直接操作原生view控件的方法。通过要更新view控件中的id属性值匹配子View控件更新绘制内容,如果没有查找到对应id的子View控件则忽略。 此操作仅更新子View控件上绘制的内容,不会添加或删除原生子View控件对象。

var currWV = plus.webview.currentWebview();  
	  
//比如更新控件颜色  
currWV.updateSubNViews([{  
	id: 'tabIcon',  
	tags: [{  
		id: 'iconBg',  
		rectStyles: {  
			color: '#ff0',    
			size: '50px',  
			radius: '50%'  
		}  
	}, {  
		id: 'icon',  
		text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'  
		textStyles: {  
			fontSrc: '_www/fonts/iconfont.ttf',  
			align: 'center',  
			color: '#000',  
			size: '30px'  
		}  
	}]  
}])  

说明:
1.position 的默认值为 {top:'0px',left:'0px',width:'100%',height:'100%'},如果与默认值相同,可以不传。
2.需要更新的tag 如果与默认值不相同,需要重新传值。

总结:
1.以上提供两种方式更新此类view控件,实现方法基本类似,开发者可根据使用场景选择恰当的方式。
2.此类方法创建的view控件与通过subNViews节点配置方法实现的效果一样,区别在于subNViews配置需要在创建webview时就引入。但是这样配置的信息就可以在页面中通过以下方式获取到view控件的相应信息。对于处理多个view控件的自动更新方便很多,比如首页底部选项卡

var nviews = currWV.getStyle().subNViews(); //返回配置的view控件的所有信息

3.关于如何更新subNViews节点配置的view控件。请下载参考教程 中上传的附件demo。

4 关注 分享
Trust 雪之梦技术驿站 8***@qq.com gaus

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 c***@163.com :
我有问题想请教您一下 我QQ1131895059
2019-11-05 10:51
2***@qq.com

2***@qq.com

IOS 下无法显示图标 都是?
2019-09-18 11:03
c***@163.com

c***@163.com

updateSubNViews()更新tag:"img"时的src不会弄,总是报错= = 找不到demo 留下了菜鸡的眼泪
2019-05-17 18:24
橙子Zzz

橙子Zzz

如果是像购物车我点击其他页面的加入购物车怎么跳转到对应的tab位置
2018-05-09 10:59
cydida

cydida

怎么加阴影?
2018-04-17 14:04
指尖上的代码

指尖上的代码

draw绘制的img不能倒圆角。如果一个搜索框前面有个搜索的图标,这个时候不能叠在一起,input设置了背景颜色就看不见了,input也不能设置padding.没有类似定位zindex的参数设置下吗.......
2018-01-12 19:29
BUG程序员

BUG程序员

回复 n***@gmail.com :
刚刚想到了,哈哈,谢谢哈
function headerViewClick(e){
var x=e.clientX;
var y=e.clientY;
if(y>10&&y<40){
//search框的区域
if(x>(window.innerWidth * 0.05) && x<(window.innerWidth * 0.75)){

}
//发现图标区域
if(x>(window.innerWidth * 0.78) && x<(window.innerWidth * 0.78 + 26)){

}
//add图标区域
if(x>(window.innerWidth * 0.88) && x<(window.innerWidth * 0.78 + 26)){

}
}
}
2017-11-08 11:41
n***@gmail.com

n***@gmail.com (作者)

回复 BUG程序员 :
。。。。百分比
2017-11-08 11:26
BUG程序员

BUG程序员

回复 n***@gmail.com :
如何判断点击坐标在tag所在区域呢?不同手机,tag的坐标区域不一样啊!
2017-11-08 11:15
n***@gmail.com

n***@gmail.com (作者)

回复 BUG程序员 :
只有view控件有点击事件,tag的点击得根据点击位置自行判断。tag的相关文档请参考http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles
2017-11-07 19:56