一. 创建模板
-
只新建wxml和wxss文件就可以了。 目前模板中只能处理样式还不能处理逻辑。所以不能用js。听说小程序团队正在开发中。创建模板文件
- template.wxml的实现
<template name="template">
<view class="list-container">
<text class="title">{{name}}</text>
</view>
</template>
用<template name="template的名字"> </template> 声明一个模板。
- template.wxss的实现
.list-container {
background-color: #f0f0f0;
line-height: 100rpx;
margin: 20rpx;
display: flex;
/** 子元素的对齐方式
1. justify-conent 根据主轴对齐
2. align-items 根据侧轴对齐
*/
align-items: center;
justify-content: space-between;
}
.title {
margin-left: 15rpx;
}
- 在使用的index.wxml中 用<import src="路径"/> 引入模板文件
// 注意文件路径是不是对 注意最后一个 /
<import src="../template/template.wxml" />
这样就把template.wxml中的骨架引入到了index.wxml中了。
- 在使用index.wxss中 用 @import "" 引入模板文件
// 注意文件路径对不对。 注意 最后面的分号
@import "../template/template.wxss";
这样就把template.wxss中的骨架引入到了index.wxss中了。
至此 模板的就引用完了。
二. 给模板添加点击事件
模板本身是不支持添加点击事件的。 可以使用一个view标签包裹起来该模板，在view标签上添加点击事件。
// index.wxml中
<view catchtap="onJumpTap">
<template is="template" />
</view>
// index.js中
onJumpTap: function (event) {
let name = event.currentTarget.dataset.apiid;
console.log(name);
}
三.给模板添加标记
同样要添加在包裹的view标签上
// index.wxml中
<view data-apiid="添加的标记id">
<template is="template" />
</view>
// index.js中
onJumpTap: function (event) {
let id = event.currentTarget.dataset.apiid;
console.log(id);
}
说明:
- 设置的data-标记名称 会自动转为全小学。 即data-apiId 会转为data-apiid。
- 注意给标签添加data-id 和 直接设置id的区别。
第一种是给标签添加属性值。不同的标签之间可以设置相同的值的属性。<view data-id='sign'></view> <view id='sign'></view>
第二种是给标签添加选择器。不同的标签不能设置相同id值。
