微信小程序模板中使用循环
本篇介绍如何在模板里使用循环。
方法一:
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。
微信小程序模板中使用循环的更多相关文章
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...
- 解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
- 微信小程序模板消息后端代码
利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...
- 120多套各种类别微信小程序模板源码打包下载
120多套各种类别微信小程序模板源码打包下载,以下是部分截图欢迎下载!120多套各种类别微信小程序模板源码打包下载 下载地址:https://pan.baidu.com/s/1Cfqyc9p2ZDOc ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- PHP实现推送微信小程序模板消息
这边只会写如何实现,至于在公众号管理后台添加模板消息可以参考这篇文章: https://www.cnblogs.com/txw1958/p/wechat-template-message.html,当 ...
随机推荐
- ThinkPHP子类继承Controller类的注意事项
在实际的开发中,往往有很多子类都继承自同一个父类,然后该父类再继承自框架内置类的需求. 比如: class Init extends Controller{...} class son1 extend ...
- Kotlin语言编程技巧集
空语句 Kotlin 语言中的空语句有 {} Unit when (x) { 1 -> ... 2 -> ... else -> {} // else -> Unit } Wh ...
- window 服务
c#写windows服务 序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用W ...
- 2.Servlet基础.md
目录 1.定义 2.特点 3.手动编写一个Servlet 3.1创建一个Servlet类 3.2找到编写类的class文件,将这个类的整个包拷贝到一个web应用中的WEB-INF/classes目录下 ...
- 关于 私有变量的访问问题【 java python]
#coding:utf-8 class Teacher(): __clas = '' # 类私有变量同样遵循,只能在类内部访问,外部无法访问,但是类的方法可以访问同类所有对象私有变量这个规则. def ...
- Windows组件下载地址
Windows下载中心 http://www.microsoft.com/zh-cn/download/default.aspx IE10下载地址 http://www.microsoft.com/z ...
- poj2115-Looooops-(扩展欧几里得定理)
C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions:33752 Accepted: 9832 Descri ...
- bind,call,applay的区别
方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...
- html -引入其他html页面
其他页面html为:ip.html 主页面代码 <body> <div id="ip"></div> </body> <scr ...
- java aop的理解
https://www.cnblogs.com/mafly/p/SpringAOP.html