微信小程序 教程之模板


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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 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
解析左右值无限分类的实现算法
2013/06/20 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Django框架封装外部函数示例
2019/05/28 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
浅谈Python协程
2020/06/17 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python