小程序-模板template

GitHub地址

一. 创建模板

1. 只新建wxml和wxss文件就可以了。 目前模板中只能处理样式还不能处理逻辑。所以不能用js。听说小程序团队正在开发中。 创建模板文件
2. template.wxml的实现

<template name="template">
  <view class="list-container">
    <text class="title">{{name}}</text>
  </view>
</template>

用<template name="template的名字"> </template> 声明一个模板。

3. 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;
}

4. 在使用的index.wxml中 用<import src="路径"/> 引入模板文件

// 注意文件路径是不是对   注意最后一个 /
<import src="../template/template.wxml" />

这样就把template.wxml中的骨架引入到了index.wxml中了。

5. 在使用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值。