一. 創(chuàng)建模板
-
只新建wxml和wxss文件就可以了。 目前模板中只能處理樣式還不能處理邏輯挡闰。所以不能用js。聽說小程序團隊正在開發(fā)中。創(chuàng)建模板文件
- template.wxml的實現(xiàn)
<template name="template">
<view class="list-container">
<text class="title">{{name}}</text>
</view>
</template>
用<template name="template的名字"> </template> 聲明一個模板吁伺。
- template.wxss的實現(xiàn)
.list-container {
background-color: #f0f0f0;
line-height: 100rpx;
margin: 20rpx;
display: flex;
/** 子元素的對齊方式
1. justify-conent 根據(jù)主軸對齊
2. align-items 根據(jù)側(cè)軸對齊
*/
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-標記名稱 會自動轉(zhuǎn)為全小學。 即data-apiId 會轉(zhuǎn)為data-apiid夸赫。
- 注意給標簽添加data-id 和 直接設置id的區(qū)別矾克。
第一種是給標簽添加屬性值。不同的標簽之間可以設置相同的值的屬性憔足。<view data-id='sign'></view> <view id='sign'></view>
第二種是給標簽添加選擇器。不同的標簽不能設置相同id值酒繁。
