微信小程序 教程之模板


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 相关文章推荐
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
js预加载图片方法汇总
Jun 15 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
js实现下拉菜单效果
Mar 01 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
django文档学习之applications使用详解
2018/01/29 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Django之模型层多表操作的实现
2019/01/08 Python
python实现加密的方式总结
2020/01/19 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
班级入场式解说词
2014/02/01 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang