模版 Template使用
2018-12-20 本文已影响10人
Bana
基本样式 --- home-cell.wxml
name:对应的模版名称
template类似静态页面,只需要创建wxml就可以
<template name="home-cell" >
<view class="cell">
<view class='cell-img-bg'>
<image class="cell-img" src="{{url}}"></image>
<view class='cell-title'>
<view class='cell-name1'>{{name}}</view>
<view class='cell-name2'>ID:{{key}}</view>
</view>
</view>
<button bindtap='clickVoteBtn' data-id="{{key}}" class="cell-btn">投TA一票</button>
<view class='cell-result'>{{num}}</view>
</view>
</template>
调用方式 --- index.wxml
需要import导入模版
1.is对应模版名称
2.data对应数据
<import src="template/home-cell.wxml" />
<view class='list'>
<block wx:for="{{note}}" wx:key="item">
<template is="home-cell" data="{{...item}}" ></template>
</block>
</view>
模版中按钮点击事件 --- home-cell.wxml
<button bindtap='clickVoteBtn' data-id="{{key}}" class="cell-btn">投TA一票</button>
在index.js中定义clickVoteBtn方法 --- index.js
clickVoteBtn: function (event) {
wx.showToast({
title: event.currentTarget.dataset.id,
})
}