wx------模板

模板  

WXML提供模板（template），可以在模板中定义代码片段（wxml、wxss），然后在不同的地方调用。

定义模板

    使用 <font color='red'>name 属性</font>，作为模板的名字。然后在`<template/>`内定义代码片段，使用步骤如下：

1.创建模板文件(template)
2.定义模板
    <template name="模板名字">
        <!-- 真实的模板内容template不会渲染起包裹作用 -->
        ...
    </template>
3.引入模板
	wxml中引入：<import src="相对路径"></import>
	wxss中引入：@import "路径";
4.使用模板
	<template is="模板名称"></template>

使用模板

使用 is 属性，声明需要的使用的模板

//例子
1.定义模板
<template name="list">
    <view class="item">
      <view class="left"></view>
      <view class="content"></view>
    </view>
</template>
2.wxml中引入模板
<import src="../../template/list/list"></import>
3.wxss中引入模板
@import "../../template/list/list.wxss";
4.使用模板
<template is="list"></template>

模板传递数据

<template is="模板名称" data={{数据变量}}></template>

//语法1
//定义模板
<template name="list">
  <view class="item">
    <view class="left">{{item.img}}</view>
    <view class="content">{{item.info}}</view>
  </view>
</template>

//导入模板
<import src="../../template/list/list"></import>

//使用模板
<view wx:for="{{arr}}" wx:key="index">
  <template is="list" data="{{item}}"></template>
</view>

 

//语法2
//定义模板
<template name="list">
  <view class="item">
    <view class="left">{{img}}</view>
    <view class="content">{{info}}</view>
  </view>
</template>

//导入模板
<import src="../../templatet/list"></import>

//使用模板
<view wx:for="{{arr}}" wx:key="index">
  <template is="list" data="{{...item}}"></template>
</view>