美文网首页
模版 Template使用

模版 Template使用

作者: Bana | 来源:发表于2018-12-20 11:31 被阅读10次

基本样式 --- 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,
    })
  }

相关文章

  • 模版 Template使用

    基本样式 --- home-cell.wxml name:对应的模版名称template类似静态页面,只需要创建w...

  • 模板的使用

    模版 Go模板使用 在Go语言中,我们使用template包来进行模版处理,使用类似Parse,ParseFile...

  • 6 Vue渲染页面 html模版、template模版、rend

    Vue渲染页面可使用html模版、template模版、render渲染函数;渲染过程的底层原理:模版[strin...

  • vue render

    render 作用是为了创建html模版 区别:使用