微信小程序 教程之模板


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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
js实现多个标题吸顶效果
Jan 08 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
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现多线程网页下载器
2018/04/15 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python障碍式期权定价公式
2019/07/19 Python
python获取array中指定元素的示例
2019/11/26 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
行政部工作岗位职责范本
2014/03/05 职场文书
2014春晚主持词
2014/03/25 职场文书
艺术节主持词
2014/04/02 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
瘦西湖导游词
2015/02/03 职场文书