微信小程序 template 的使用

编辑 template 中的 wxml 代码：

<!-- 模板 -->
<template name="listTem">
  <view class="list">
    <view class="img">
      <image src="/images/idCard.png"></image>
    </view>
    <view class="name">
      <view><text>学籍查询时间：</text><text>{{item.date}}</text></view>
      <view><text>查询人：</text><text>{{item.name}}</text></view>
      <view><text>被查询人：</text><text>{{item.person}}</text></view>
    </view>
  </view>
</template>

编辑页面对应的 CSS 代码：

.list{
  height: 180rpx;
  border-bottom: 1px solid #999999;
}

.img image{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  float: left;
  /* 上右下左 */
  margin: 10rpx 0rpx 10rpx 25rpx;
}

.name{
  height: 50rpx;
  line-height: 50rpx;
  float: left;
  margin: 10rpx 0rpx 10rpx 25rpx;
  font-size: 14px;
}

引入 template 模板：

<!--pages/informationList/informationList.wxml-->
<import src="/pages/template/listTem/listTem" />
<view class="container">
  <block wx:for="{{posts_key}}" wx:key="posts_key" wx:for-item="item">
    <!-- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入 -->
    <template is="listTem" data="{{item}}" />
  </block>
</view>

引入 template 对应的样式文件：

/* pages/informationList/informationList.wxss */
.container {
  width: 100%;
}

@import "../template/listTem/listTem.wxss"

其中 data 中对应的数据为：

data: {
     posts_key: [{
       index: 0,
       name: 'this is a template',
       date: '2016-09-15'
     },{
       index: 1,
       name: 'this is a template1',
       date: '2016-09-151'
     }]
  }