模板可以用單獨(dú)的wxml來保存
使用的時(shí)候, 用import導(dǎo)入模板
創(chuàng)建模板數(shù)據(jù)的來源:
-
Page({
-
data: {
-
mo: 'Hello World!!',
-
userid : '1234',
-
text:'測試',
-
list: [{
-
index: 0,
-
msg: "this is a template",
-
time: "2016-09-15"
-
},
-
{
-
index: 1000,
-
msg: "this is a new template",
-
time: "2026-09-15"
-
}]
-
},
創(chuàng)建模板文件(可以放在其它專用文件夾):
-
<!--模板獨(dú)立成單獨(dú)的文件-->
-
-
<template name="item">
-
-
<view>template text: {{msg}}</view>
-
-
<view>日期 : {{time}}</view>
-
-
</template>
使用import導(dǎo)入模板并使用
-
<!--模板引用-->
-
<import src='../common/template.wxml'/>
-
-
<view class='container'>
-
-
<view wx:for='{{list}}'>
-
<!--模板使用-->
-
<template is='item' data="{{...item}}"/>
-
</view>
-
-
</view>
is就是模板的名稱, data是模板要使用的數(shù)據(jù)
...item是ES6簡寫的方式, 如果不用此方式, 則在模板定義中就是{{item.xxx}}, 而不是{{xxx}}
include用于拆分頁面, 它不傳遞參數(shù)(template則可以傳遞參數(shù))
由于很多頁面的頭部和底部是一樣的
所以可以定義頭部和底部, 再將它們包進(jìn)不同的頁面
-
header.wxml, footer.wxml
-
-
<import src='../common/template.wxml'/>
-
<view class='container'>
-
-
<include src='../common/header.wxml'/>
-
-
<view>
-
<template is='item' data="{{xxx}}"/>
-
</view>
-
-
<include src='../common/footer.wxml'/>
-
-
</view>
使用include標(biāo)簽完成頁面包含, 使用import標(biāo)簽完成模板導(dǎo)入