微信小程序中template使用循环

我们有的时候会用到template，然后template中我们又想使用循环来渲染数据

那么可以使用data将数据传入，然后使用data中的数据进行循环渲染

比如我们的template中hot的wxml如下

<template name="hot">
<view wx:for="{{hotData}}"><view style="width:94%;height:200rpx;margin:0 auto">
      <view style="width:10%;height:100%;float:left;text-align:center;"><view style="margin-top:40rpx">{{item}}</view></view>
      <view class="hotText" style="width:60%;height:100%;float:left;">
         <text>印度最大贫民窟首次报告新冠确诊案列，这个意味着什么？印度疫情会大规模爆发吗？</text>
      </view>
      <view style="width:28%;height:100%;float:right">
         <image style="width:100%;height:130rpx;margin-top:10rpx;border-radius:8px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586020213358&di=0f21ad896d614dca598ff4451bcacda5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b001559b360a32f87598b5fff9c7.jpg%401280w_1l_2o_100sh.jpg"></image>
      </view>
   </view>
   <view class="row"></view></view>
</template>

那么我们在需要用到这个template的wxml中先引入template

<import src="../template/template.wxml" />

然后

<view style="width:100%;">
    <template is="hot" data="{{hotData}}"></template>
</view>

设置data为hotData就可以了