模板和组件有点相似,但是两者最大的区别就是:
模板主要用于显示,方法需要在被调用的页面中进行定义。
组件则是拥有自己的业务逻辑,可以当作是一个独立的页面。
总结就是:演示一些数据使用模板就可以,涉及到许多业务逻辑和交互,最好使用组件。今天将对模板template进行基础学习。
目录如下:
<!--pages/tabbar2/template/template01/template01.wxml-->
<view>
模板示例
</view>
<template name="userTemp">
<view class="user">
<view>姓名:{{item.name}}</view>
<view>性别:{{item.sex}}</view>
<view>年龄:{{item.age}}</view>
</view>
</template>
<template name="msgItem">
<view>
<view> {{index}}: {{msg}} </view>
<view> Time: {{time}} </view>
</view>
</template>
<template name="weekend">
<view class="box">
<view>今天是:{{item.day}} </view>
<view>我准备:{{item.con}} </view>
<view>运动有:{{item.relax}} </view>
<view>今天是:{{item.day}} </view>
</view>
</template>
注意!template下wxss/js 写了都不能有效
<!--pages/tabbar2/templatetest/template01/index/index.wxml-->
<import src="../template01/template01" />
<view class="container">
<block wx:for="{{users}}" wx:for-item="item">
<template is="userTemp" data="{{item}}" />
</block>
<template is="msgItem" data="{{...item}}"/>
<block wx:for="{{weekendItem}}">
<template is="weekend" data="{{item}}"></template>
</block>
</view>
// pages/tabbar2/templatetest/template01/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
users:[
{
name:'张三',
sex:'男',
age:'18'
},{
name:'李四',
sex:'男',
age:'18'
},{
name:'桃儿',
sex:'男',
age:'18'
},
],
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
},
weekendItem:[
{
day: 'Mon',
con: '学习',
relax: 'running'
},
{
day: 'Thur',
con: '工作',
relax: 'running'
},
{
day: 'Wed',
con: '看书',
relax: 'running'
},
]
},
/* pages/tabbar2/templatetest/template01/index/index.wxss */
.user{
display: flex;
}
.user view{
border: 1px solid;
width: 200rpx;
box-sizing: border-box;
}
.box{
margin: 10rpx;
border: 2rpx solid pink;
}