DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-08-25 22:44
  • 更新:2021-03-12 13:24
  • 阅读:15310

模板事件 - NView模板 - wap2app教程

分类:wap2app

onclick事件

在NView模板中,很多控件都可以通过onclick属性配置控件的点击事件,配置方式如下:

<element onclick={this.func_name}></element>

func_name是一个函数,需要在<script>节点下的methods中声明,示例如下:

<script>  
	module.exports = {  
		data: {},//数据  
		methods: {  
			func_name: function(event) {   
				//点击事件触发  
			}  
		}  
	};  
</script>

点击事件的回调函数自带一个event参数,通过event.detail可以访问当前NView模板中绑定的数据(即data对象),如下是一个完整示例,点击按钮,打印当前的产品名称和版本号:

<template>  
	<nviews cachemaxage="86400">  
		<nview style="height:100px">  
			<canvas>  
				<button onclick={this.clickBtn}>按钮</button>  
			</canvas>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		data: {  
			name: "wap2app",  
			version: "1.0.0"  
		},  
		methods: {  
			clickBtn: function(event) { //按钮点击事件触发  
				var data = event.detail;  
				console.log("name:" + data.name + ",version:" + data.version);  
			}  
		}  
	};  
</script>

NView模板中,列表组件(<list>)和流式布局控件(<richtext>)的点击事件相对特殊,下文分别介绍。

list组件

<list>标签的onclick点击事件同上,但列表项<item>的点击事件相对特殊,如果列表项是通过n-for指令循环渲染的,则在点击回调函数中,除了event参数外,还有item、index两个参数,分别表示当前列表项的数据及列表项索引,详细参考NView模板绘制原生列表教程

richtext布局控件

<richtext>布局控件也支持监听点击事件,配置方式同上;但<richtext>内部嵌套的子控件不支持监听onclick事件,用户点击<richtext>内部控件时,会向上冒泡到父容器<richtext>标签上,触发<richtext>的onclick回调。

同普通控件的点击回调,<richtext>的点击回调函数,自带一个event参数,通过event.detail可以访问当前NView模板中绑定的数据(即data对象);另外,还可以通过event访问点击目标对象的属性(tagName、href、src),具体情况如下:

  • 如果点击的是<richtext>中的<a>标签,则回调函数event参数中包含tagName(值为"a")和href属性;
  • 如果点击的是<richtext>中的<img>标签,则回调函数event参数中包含tagName(值为"img")和src属性;
  • 如果点击的是<richtext>中的其它区域或控件,则回调函数event参数中包含tagName(值为"")

如下是一个示例代码:

<template>  
	<nviews cachemaxage="86400">  
		<nview style="height:100px;" >  
			<richtext onclick={this.handleRichText}>  
				<img src="logo.png" width="20px" height="20px"></img>  
				<a href="http://www.example.com">  
					http://www.example.com  
				</a>  
			</richtext>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		methods: {  
			handleRichText:function(e){  
				console.log("tagName:" + e.tagName);  
				console.log("href:" + e.href);  
				console.log("src:" + e.src);  
			}  
		}  
	};  
</script>

事件冒泡

NView模板中,点击事件默认会从子控件向父控件冒泡。

如下示例中,nview和button标签同时监听了点击事件,当用户点击button按钮时,会先弹框提醒“click button!”,然后点击事件向父容器冒泡,接着弹框提醒"click nview!"。

<template>  
	<nviews cachemaxage="86400">  
		<nview style="height:100px" onclick={this.clickNView}>  
			<canvas>  
				<button style="top:10px;left:20px;" onclick={this.clickBtn}>按钮</button>  
				<img style="top:10px;left:100px;" src="_www/img/demo.png"></img>  
			</canvas>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		data: {  
			//默认数据  
		},  
		init: function(url) {  
			//动态初始化数据  
		},  
		methods: {  
			clickNView:function(event){//nview点击事件触发  
				alert("click nview!");  
			},  
			clickBtn:function(event){//按钮点击事件触发  
				alert("click button!");  
			}  
		}  
	};  
</script>

如果想阻止事件冒泡,可以在子控件的点击函数增加return false语句,如下:

<template>  
	<nviews cachemaxage="86400">  
		<nview  style="height:100px;" onclick={this.clickNView}>  
			<canvas>  
				<button style="top:10px;left:20px;" onclick={this.clickBtn}>按钮</button>  
				<img style="top:10px;left:100px;" src="_www/img/demo.png"></img>  
			</canvas>  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
		data: {  
			//默认数据  
		},  
		init: function(url) {  
			//动态初始化数据  
		},  
		methods: {  
			clickNView:function(event){//nview点击事件触发  
				alert("click nview!");  
			},  
			clickBtn:function(event){//按钮点击事件触发  
				alert("click button!");  
				return false;//阻止事件冒泡  
			}  
		}  
	};  
</script>

阻止事件冒泡后,用户再次点击button按钮,则会弹框提醒“click button!”,不会再弹框提醒"click nview!"。

事件拦截

subNView作为webview的一个子控件,覆盖在webview上方,当用户点击subNView控件时,subNView默认会拦截touch事件,不会将touch事件透传给下层的webview中的DOM元素。

wap2app支持通过设置nview标签的intercept属性配置touch事件是否拦截,默认为true,即拦截touch事件,下层webview中的DOM元素无法触发touch事件;如果设置为false,则不拦截touch事件,下层webview中的DOM元素将接收到用户的touch事件,从而触发原来HTML页面的touch事件逻辑。

如下示例代码中,nview1设置了不拦截touch事件,则在nview1区域点击时,都会透传给下方的webview页面中的DOM元素,触发DOM元素的点击事件.

<template>  
	<nviews cachemaxage="86400">  
		<nview id="nview1" style="position:static" intercept=“false”>  
			...  
		</nview>  
	</nviews>  
</template>  
<script>  
	module.exports = {  
  
	};  
</script>

Tips:仅nview标签支持intercept属性设置。

4 关注 分享
赵梦欢 雪之梦技术驿站 Trust 水灵退散

要回复文章请先登录注册

1***@qq.com

1***@qq.com

有点丧心病狂的排版
2021-03-12 13:24
雪之梦技术驿站

雪之梦技术驿站

mark
2017-08-26 09:08