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

来源：互联网发布：看电视用什么软件编辑：程序博客网时间：2024/04/19 05:03

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

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

2.在js中写入几组数据

// pages/wxml2/wxml2.jsPage({  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>

效果图↓

阅读全文

0 0