微信小程序的template模板引用

微信小程序有个template模板引用的功能,就是如果页面上多处用到了想同的样式且数据也是同样的时候可以使用template模板。

具体就是写个模板然后需要的页面引用就可以了,下面是我项目的一个例子

这是我定义的一个模板

<template name="goodsItemTemplate">
  <view  class='goods_all' catchtap='listClick' data-title='{{goods_name}}' data-url='/goods/goodsdetail/goodsdetail?goods_id={{goods_id}}&&goods_name={{goods_name}}'>
    <view class="all-box">
      <image src="{{pic_cover_small}}" mode="widthFix"></image>
      <view class="shop-detail">
        <text  decode="true" class="title">
          <block wx:for='{{group_query}}' wx:key='' wx:for-item='vo'>
            <text class="i goods_tab">{{vo.group_name}}</text>
          </block>{{goods_name}}
        </text>
        <view class="shop-detail-price">
          <text>¥{{promotion_price}}</text>
          <view style='text-decoration:line-through;color:#d7d7d7;font-size:12px;' wx:if="{{market_price - promotion_price > 0}}">¥{{market_price}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

注意每个template都需要一个name,引用模板的页面会根据name的不同来进行区分

在需要引用模板的也买先引入文件

<!-- 引入tempalte  -->
<import src="/templates/goods-item-template/goods-item-template.wxml" />

在需要用到模板的地方写上

<template is="goodsItemTemplate" data="{{...shops}}" />

shops是模板页面需要用的数据,shops是个对象,需要用到的数据只需要写上字段名就可以了  不需要像之前那样写上对象名.字段名。

这样就算引用成功了,其他页面也是可以引用的,但是要保证需要的字段是一样的才不会出错。样式可以在模板文件夹里面写公共的也可以在引用的父文件写样式,如果是公共的样式  在父文件的wxss中写上下面的引用就可以了

@import "/templates/goods-item-template/goods-item-template.wxss";

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值