概述: 引用官方文檔結(jié)合一個列表自定義單元格例子講解template 簡單使用
使用套路:
1.定義template ;(包括wxml 和 wxss)
2.template 導(dǎo)入;(wxml 導(dǎo)入使用```<import src="路徑"/>```, wxss導(dǎo)入使用:```@import "路徑";```)
3. template 傳值;(只能使用data)
一. 基礎(chǔ)概念:
1.1 template 定義:
使用name屬性枷畏，作為模板的名字别厘。然后在<template/>內(nèi)定義代碼片段，如：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
注意:標(biāo)簽結(jié)構(gòu): <template name="name"></template>
1.2 template 使用:
1.使用 <import src="文件路徑"/> 導(dǎo)入wxml 文件;
2.使用@import "文件路徑"; 導(dǎo)入wxss樣式表;
3.使用 is 屬性拥诡，聲明需要的使用的模板触趴，然后將模板所需要的 data 傳入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is 屬性可以使用 Mustache 語法渴肉，來動態(tài)決定具體需要渲染哪個模板：
<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傳入的數(shù)據(jù)。(自己不要妄想直接賦值嘍)
1.3 知識擴展:
1.3.1 : 對象擴展符號
<template is="msgItem" data="{{...item}}"/>
所謂對象擴展符,顧名思義就是把對象擴展開來的意思,事實也是如此;例如:
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>```
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
最終組合成的對象是{a: 1, b: 2, c: 3, d: 4, e: 5}仇祭。
如果對象的 key 和 value 相同披蕉，也可以間接地表達。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
最終組合成的對象是 {foo: 'my-foo', bar:'my-bar'}。
二. 自定義單元格列表的使用示例:
2.1 效果圖
自定義列表
2.2 template 定義:
template 定義:
<template name="cell">
<view id="id" class="tableView" bindtap="selectedCell" >
<view class="titleView">{{title}}</view>
<image class="imageView" src="/pages/image/{{imageSource}}" mode="scaleToFill"></image>
</view>
</template>
template 對應(yīng)樣式表:
.tableView{
display: flex;
justify-content: space-between;
height: 60px;
background-color: #B12E2E;
align-items: center;
margin: 20px 0;
}
.titleView{
padding-left: 20px;
text-align: left;
color: #AfEFEf;
}
.imageView{
width: 40px;
height: 40px;
margin-right: 20px;
}
2.3: template 使用:
<import src="cell.wxml"/>
<view class="containtView">
<block wx:for="{{list}}" wx:key="title" wx:for-item="pitem" >
<template is="cell" data="{{...pitem}}"/>
</block>
</view>
template樣式表引用:
/* table.wxss */
@import "cell.wxss";
.containt{
display: flex;
flex-direction: column;
}
2.4: data 數(shù)據(jù):
data: {
list:[{
id:'1',
title:'接口',
imageSource:'green_tri.png',
span: true,
},
{
id: '2',
title: '文檔',
imageSource: 'icon_API.png',
}, {
id: '3',
title: '百度',
imageSource: 'icon_API_HL.png',
}, {
id: '4',
title: '谷歌',
imageSource: 'icon_foot.png'
}, {
id: '5',
title: '高德',
imageSource: 'location.png'
}, {
id: '6',
title: '搜狐',
imageSource: 'trash.png'
}, {
id: '7',
title: '愛奇藝',
imageSource: 'wechat.png'
}, {
id: '8',
title: '騰訊',
imageSource: 'wechatHL.png'
}
]
}
