码迷,mamicode.com
首页 > 其他好文 > 详细

模板(template)

时间:2019-11-30 19:11:06      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:sgi   splay   ram   bsp   mini   developer   name   技术   ima   

文档地址: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]}}"/>

 

 

 

 

 

模板(template)

标签:sgi   splay   ram   bsp   mini   developer   name   技术   ima   

原文地址:https://www.cnblogs.com/caitangbutian/p/11963338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!