微信小程序模板中使用循环

原创文章

本篇介绍如何在模板里使用循环。
方法一：
template.wxml，该文件内容为：

<template name="msgItem1">
<block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">
  <view>
    <text> {{item.index}}: {{item.msg}} </text>
    <text> Time: {{item.time}} </text>
  </view>
  </block>
</template>

 

方法二：使用模板：
template.wxml，该文件内容为：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

 

<template name="msgItem1">
<block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">
  <template is="msgItem" data="{{...item}}"/>
</block>
</template>

 

index.js的内容为：

Page({
  data: {
    product1: [{
      index: 0,
      msg: 'this is a template',
      time: '217-09-15'
    }, {
      index: 1,
      msg: 'this is a template',
      time: '2020-09-15'
      }, {
        index: 2,
        msg: 'this is a template',
        time: '2018-09-15'
      },]
   },
})

 

我们在index.wxml里的内容为：

<import src="../template/template.wxml"/>
<template is="msgItem1" data="{{product1}}"/>

 

这里不需要使用扩展运算符展开product1。