微信小程序教程之模板

151 阅读 0 评论 100 点赞

我是靠谱客的博主开放小松鼠，这篇文章主要介绍微信小程序教程之模板，现在分享给大家，希望可以做个参考。

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：

复制代码<!--  
 index: int  
 msg: string  
 time: string  
-->  
<template name="msgItem">  
 <view>  
 <text> {{index}}: {{msg}} </text>  
 <text> Time: {{time}} </text>  
 </view>  
</template>1
2
3
4
5
6
7
8
9
10
11
<!--  
 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'  
 }  
 }  
})1
2
3
4
5
6
7
8
9
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'}}"></template>  
</block>1
2
3
4
5
6
7
8
9
10
<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传入的数据。

以上就是微信小程序教程之模板的内容，更多相关内容请关注PHP中文网（www.uoften.com）！