微信小程序模板中使用循环

原创文章

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

转载于:https://www.cnblogs.com/yanduanduan/p/8745573.html

相关资源：JAVA上百实例源码以及开源项目