zoukankan      html  css  js  c++  java
  • 微信小程序使用模板Template

    第一步:创建模板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('我是在模板中被执行的方法')
    }
  • 相关阅读:
    compass 制作css sprites
    net模块
    javascript -- 代理模式
    javascript -- 单例模式
    js 对象的浅拷贝和深拷贝
    js 对象的封装,继承,多态的理解
    this,call,apply
    flex 实现圣杯布局
    ubuntu中安装mongodb
    devDependencies和dependencies的区别
  • 原文地址:https://www.cnblogs.com/liucailing/p/13188156.html
Copyright © 2011-2022 走看看