模版 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,
    })
  }
上一篇下一篇

猜你喜欢

热点阅读