概述: 引用官方文档结合一个列表自定义单元格例子讲解template 简单使用
使用套路:
1.定义template ;(包括wxml 和 wxss)
2.template 导入;(wxml 导入使用```<import src="路径"/>```, wxss导入使用:```@import "路径";```)
3. template 传值;(只能使用data)
一. 基础概念:
1.1 template 定义:
使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
注意:标签结构: <template name="name"></template>
1.2 template 使用:
1.使用 <import src="文件路径"/> 导入wxml 文件;
2.使用@import "文件路径"; 导入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 语法，来动态决定具体需要渲染哪个模板：
<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传入的数据。(自己不要妄想直接赋值喽)
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 对应样式表:
.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 数据:
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'
}
]
}
