模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
定义模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<!-- 定义模板 -->
<template name="message">
<view class="message-group">
<text class="content">{{content}}</text>
<text class="friend">{{friend}}</text>
<text class="time">{{time}}</text>
</view>
</template>
一般一个模板文件夹中包含wxml界面文件和wxss样式文件。
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<!-- 导入模板 -->
<import src="../../../templates/message/message.wxml"></import>
<!-- 使用模板 -->
<!-- <template is="message" wx:for="{{messages}}" data="{{content:item.content,friend:item.friend,time:'2020/1/1'}}"></template> -->
<!-- ..item 把item里面的每一项列出来 -->
<!-- 如果js中的数据和模板中的变量对应可之用 ...item简写方式-->
<template is="message" wx:for="{{messages}}" data="{{...item}}"></template>
js文件设置相关数据:
Page({
/**
* 页面的初始数据
*/
data: {
messages:[
{
content:"今天一起唱歌吧",
friend:'周杰伦'
},
{
content:"十二道锋味",
friend:"谢霆锋"
}
]
}
})
使用模板对应的css:
@import "../../../templates/message/message.wxss";