本篇介绍如何在模板里使用循环。
方法一:
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。