微信小程序 教程之模板


Posted in Javascript onOctober 18, 2016

系列文章:

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:

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

使用模板

使用is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:

<template is="msgItem" data="{{...item}}"/>

Page({
 data: {
 item: {
 index: 0,
 msg: 'this is a template',
 time: '2016-09-15'
 }
 }
})

is属性可以使用Mustache语法,在运行时来决定具体需要渲染哪个模板:

<template name="odd">
 <view> odd </view>
</template>
<template name="even">
 <view> even </view>
</template>

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

模板的作用域

模板拥有自己的作用域,只能使用data传入的数据。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
表格 隔行换色升级版
Nov 07 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jQuery的学习步骤
2011/02/23 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
毕业生简单求职信
2013/11/19 职场文书
五年级数学教学反思
2014/02/11 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
幼师求职自荐信
2015/03/26 职场文书
个人廉政承诺书
2015/04/28 职场文书
军训新闻稿范文
2015/07/17 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL