美文网首页
模版 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使用

          本文链接:https://www.haomeiwen.com/subject/offykqtx.html