微信小程序 教程之模板


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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
JavaScript获取路径设计源码
May 22 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
vue.js todolist实现代码
Oct 29 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php的dl函数用法实例
2014/11/06 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
python如何安装下载后的模块
2020/07/03 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis