微信小程序 template添加点击事件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

介绍
template是微信小程序提供的模板，可以在模板中定义代码片段，然后在不同的地方调用。

简单使用
定义template
因为项目中可能会需要到不止一个template，所以最好新建一个文件夹来存放template相关的文件。注意这里只是单独的创建各个文件，并不是创建Page或者Component.
创建好之后的文件目录如图：

这里演示一个用template当列表的item，然后可以点击并获取到值。
然后开始写templates.wxml文件，这里面可以有多个template代码块，如代码所示:

<template name="template01">
<view class='item' bindtap='onclick' data-item='{{item}}'>
{{item}}
</view>
</template><template name="template02">
<view>
this is template02 and nothing to do
</view>
</template>

可以看出template和普通的标签定义差不多，但是每个template必须为它设置name，因为在使用的时候可以是根据这个name的值来找到对应关系的。

然后开始布局，templates.wxss文件代码：

.item{
background: beige;
padding: 10px;
display: flex;
flex:;
justify-content: center;
align-items: center;
margin: 20px 10px 10px 10px
}

最后完成template里面的逻辑事件，templates.js文件代码：

var temp = {
onclick: function (event) {
console.log("点击了" + event.currentTarget.dataset.item)
}
}
//导出，供外部使用
export default temp

使用template

经过上面几步template的定义工作就基本完成了，下面开始具体的使用，首先在需要使用template的文件中引入templates.wxml文件，list.wxml文件的具体代码：

<import src="../templates/templates.wxml"/><view wx:for="{{arrys}}" wx:key="">
<view class='item' bindtap='itemclick' data-item='{{item}}'>

<template is="template01" data="{{item}}"/>
</view>
</view>

然后在list.wxss中引入template中用到的样式。

@import "../templates/templates.wxss";

最后在list.js中引入templates的js文件：

import templates from '../templates/templates'

到这里templates作为列表的item就可以显示了，那具体的点击事件是怎么处理的呢？
我们看这一段：

给template的外层view设置了一个点击事件，点击事件的具体代码：

itemclick(event){
templates.onclick(event)
}

其实外层view的点击事件自己什么也没做，只是调用了template中的点击事件onclick，并且把当前事件传递给了它。

onclick: function (event) {
console.log("点击了" + event.currentTarget.dataset.item)
}

这样template的点击事件和传值就实现了。
效果图：