微信小程序 教程之模板


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 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
js实现表格数据搜索
2020/08/09 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python如何实现动态数组
2019/11/02 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
小学竞选班干部演讲稿
2014/08/20 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
竞聘书的秘诀
2019/04/02 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers