模板template
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
1. 定义模板
(1)定义模板wxml
(2)定义模板wxss
2. 使用模板
(1)常规使用
(2)高效使用
定义模板
(1)wxml
<!--templates/message/message.wxml-->
<template name='message'> //模板名称
<view class="message-group">
// 模板属性
<text class='content'>{{content}}</text>
<text class='friend'>{{friend}}</text>
<text class='time'>{{time}}</text>
</view>
</template>
(2)wxss
/* templates/message/message.wxss */
// 模板布局
.message-group {
height: 50px;
border-bottom: 1px solid #e4e4e4;
line-height: 50px;;
}
.message-group .content {
float: left;
align-content: center;
justify-content: center;
}
.message-group .friend {
float: right;
font-size: burlywood;
font-size: 12p
}
使用模板
常规使用模板
<!-- 先导入模板 -->
<!-- ../../../ 返回顶层目录 -->
<import src="../../../templates/message/message.wxml"/>
<!-- 引用模板 -->
<template is="message" data="{{content:'我们一起去唱歌吧!', firend:'周杰伦'}}"/>
效果如图
高效使用模拟服务端请求
js
//js文件,绑定数据
data: {
messages: [{
content: '我们一起去唱歌吧!',
friend: '周杰伦'
},
{
content: '我给你做十二道锋味!',
friend: '谢霆锋'
}
]
}
wxml
<!-- 循环取数据,模仿服务端 -->
<template is = "message" wx:for="{{messages}}"
data="{{content:item.content, friend:item.friend}}"/>
<!-- ...item自动解包 -->
<template is = "message" wx:for="{{messages}}"
data="{{...item}}"/>
...item 可以自动解包
效果如图