【微信小程序】框架wxml（四）wxml模板

1.首先在wxml中定义template的样式

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

2.在js中写入几组数据

// pages/wxml2/wxml2.js
Page({
  data: {
    item1: {
      index: 0,
      msg: 'this is the first template',
      time: '2016-09-15'
    },item2: {
      index: 1,
      msg: 'this is the second template',
      time: '2016-09-30'
    }, item3: {
      index: 2,
      msg: 'this is the third template',
      time: '2016-10-09'
    }
  }
})

3.在wxml中使用template模板

<template is="msgItem" data="{{...item1}}"/>
<template is="msgItem" data="{{...item2}}"/>
<template is="msgItem" data="{{...item3}}"/>

4.效果图

此外，template支持Mustache语句

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <text>{{item}}</text>
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

效果图↓