模板（template）

Posted 2020-11-26 caitangbutian

文档地址：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

 

第一步，先定义模板

<template name="msgItem">
  <view>
    <text> 余额: {{remaining}}</text>
    <text> 时间: {{time}}</text>
  </view>
</template>

第二步，引用定义的模板，并循环加载所有数据

<template wx:for="{{array}}" is="msgItem" data="{{...array[index]}}"  />

 

第三步，js代码为

Page({
  data: {
    array: [
      {
        "id": 1,
        "remaining":"100",
        "time": "2019-11-30 17:14",//交易时间
      },
      {
        "id": 2,
        "remaining": "60",
        "time": "2019-11-30 17:15",//交易时间
      }
    ]
  }
})

 

 

 

结果：

 

 

技巧：在模板中的 is=“模板name”，是可以做判断的，可以随时切换大片的模板，方便数据判断

<template wx:for="{{array}}" is="{{true? ‘msgItem‘:‘‘}}" data="{{...array[index]}}"/>