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

onclick事件

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

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

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

  1. <script>
  2. module.exports = {
  3. data: {},//数据
  4. methods: {
  5. func_name: function(event) {
  6. //点击事件触发
  7. }
  8. }
  9. };
  10. </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组件

标签的onclick点击事件同上,但列表项的点击事件相对特殊,如果列表项是通过n-for指令循环渲染的,则在点击回调函数中,除了event参数外,还有item、index两个参数,分别表示当前列表项的数据及列表项索引,详细参考NView模板绘制原生列表教程。 ### richtext布局控件 布局控件也支持监听点击事件,配置方式同上;但内部嵌套的子控件不支持监听onclick事件,用户点击内部控件时,会向上冒泡到父容器标签上,触发的onclick回调。 同普通控件的点击回调,的点击回调函数,自带一个event参数,通过event.detail可以访问当前NView模板中绑定的数据(即data对象);另外,还可以通过event访问点击目标对象的属性(tagName、href、src),具体情况如下: 如果点击的是中的标签,则回调函数event参数中包含tagName(值为"a")和href属性; 如果点击的是中的模板事件 - 图1标签,则回调函数event参数中包含tagName(值为"img")和src属性; 如果点击的是中的其它区域或控件,则回调函数event参数中包含tagName(值为"") 如下是一个示例代码: html ![](https://ask.dcloud.net.cn/article/logo.png)</a>[ http://www.example.com ](http://www.example.com) module.exports = { methods: { handleRichText:function(e){ console.log(&#34;tagName:&#34; + e.tagName); console.log(&#34;href:&#34; + e.href); console.log(&#34;src:&#34; + e.src); } } }; ## 事件冒泡 NView模板中,点击事件默认会从子控件向父控件冒泡。 如下示例中,nview和button标签同时监听了点击事件,当用户点击button按钮时,会先弹框提醒“click button!”,然后点击事件向父容器冒泡,接着弹框提醒"click nview!"。 HTML 按钮 ![](https://ask.dcloud.net.cn/article/_www/img/demo.png) module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert(&#34;click nview!&#34;); }, clickBtn:function(event){//按钮点击事件触发 alert(&#34;click button!&#34;); } } }; 如果想阻止事件冒泡,可以在子控件的点击函数增加return false语句,如下: HTML 按钮 ![](https://ask.dcloud.net.cn/article/_www/img/demo.png) module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { clickNView:function(event){//nview点击事件触发 alert(&#34;click nview!&#34;); }, clickBtn:function(event){//按钮点击事件触发 alert(&#34;click button!&#34;); return false;//阻止事件冒泡 } } }; 阻止事件冒泡后,用户再次点击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元素的点击事件. HTML ... module.exports = { }; *Tips:仅nview标签支持intercept属性设置。