WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
一、定义模板
使用 name 属性,作为模板的名字。然后在内定义代码片段,如:
<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'
}
}
})
三、代码示例
<!--pages/list/list.wxml-->
<text>这是文章列表页面</text>
<template name="msgTemp">
<view>
<image src="{{src}}" mode="widthFix"></image>
</view>
<view>
<text>{{title}}</text>
<text>{{time}}</text>
</view>
</template>
<view wx:for="{{msgList}}">
<template is="msgTemp" data="{{...item}}"/>
</view>
<!--pages/list/list.js-->
Page({
data: {
msgList: [
{ id: 1, title: "标题一", time: "2017-3-5 23:01:59", src: "../images/001.png" },
{ id: 2, title: "标题二", time: "2017-3-5 23:02:59", src: "../images/002.png" },
{ id: 3, title: "标题三", time: "2017-3-5 23:03:59", src: "../images/001.png" },
{ id: 4, title: "标题四", time: "2017-3-5 23:04:59", src: "../images/002.png" }
]
}
})