首页 > 微信 > 详细

微信小程序使用模板Template

时间:2020-06-24 16:41:22      阅读:80      评论:0      收藏:0      [点我收藏+]

第一步:创建模板tel.wxml

<template name="paymentWin"><!--name是必须的-->
  <view class="paymentPopup">
    <view class="payment_content">
        <view class="payment_type">
          <view wx:for="{{recommend}}" wx:key="key" wx:for-item="item" class="payement_item" bindtap="changeGrade">
            <text class="recommend" wx:if="{{item.id==295}}">推荐购买</text>
            <view class="tit">{{item.name}}</view>
            <view class="price"><text>¥</text>{{item.pay_price}}<text>元/年</text></view>
            <view class="desc">{{item_tip}}</view>
          </view>
        </view>
    </view>
  </view>
</template>

第二步:在index.wxml中引用模板

<import src="./tel.wxml"/>
<block >
    <template is="paymentWin" data="{{...payData}}"/>
</block>

第三步:在index.wxss中引入模板的css,tel.wxss

@import "./tel.wxss";

第四步:找index.js中处理模板的数据和方法

data: {
    payData:{
      recommend:[
        {name:‘超级会员‘,pay_price:‘3880.00‘,id:295,tip:‘全站创业课程免费学!‘},
      ],
    },
},
changeGrade:()=>{
  console.log(‘我是在模板中被执行的方法‘)
}

 

微信小程序使用模板Template

原文:https://www.cnblogs.com/liucailing/p/13188156.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!