小程序-模板

模板，顾名思义，创建一个可以不断复制粘贴的板块。WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

使用场景

①列表的item项多次使用
②想单独抽取出来的布局
③功能比较独立的视图

定义模板

比如，很多列表页面底部都需要一个加载更多的loading效果。代码如下：
load-more.wxml :

<template name='loading'>
  <view wx:if='{{loading}}' class='loading-more'>
    <image src='/images/icon/loading.gif' />
    <text>加载中...</text>
  </view>
</template>

根标签需要使用<template></template>标签，name属性是此模板的名字，在使用的时候会用到。template标签里面的就写自己想实现的效果的布局。

load-more.wxss :

.loading-more {
  text-align: center;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.loading-more image {
  width: 30rpx;
  height: 30rpx;
}

.loading-more text {
  margin-left: 10rpx;
  font-size: 10pt;
  color: #888;
}

使用模板

usepage.wxml:

<import src='/template/load-more/load-more.wxml' />
<template is='loading' data='{{loading}}'></template>

在wxml中使用import导入模块，is属性即是导入模板的名字，data属性是传入在模板中使用的数据。
usepage.wxss:

@import '/template/load-more/load-more.wxss';

在wxss中使用@import导入模块的样式。

is和data

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

就是可以使用三目运算符来选择使用那个模板。

<template is="{{num % 2 == 0 ? 'even' : 'odd'}}"/>

通过data传入模板中使用的数据，模板有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

<!--  展开传入  -->
<template is='menu' data='{{posItem,posItem2,posItem3}}'></template>

<!--  折叠传入  -->
<block wx:for='{{carList}}'>
    <template is='car_old' data='{{...item}}'></template>
</block>

第一种的使用方式就是使用传入的名称。
第二种方式使用...来展开item这个object变量，使用时即可直接写对应的名称；如果不写成...item而写成item，在使用时就需要用item.xxx来使用。

example

car-new.wxml:

<template name='car_new'>

  <view class='car-new-item' data-cid='{{item.carId}}' data-ctype='{{item.type}}' catchtap='showCarDetail'>
    <image src='{{item.imageUrl}}' />
    <view class='name text-one'>{{item.categoryName}}</view>
    <view class='kind text-one'>{{item.modelName}}</view>
    <view class='time'>
      <text>{{item.time}}</text>
    </view>
    <view class='bottom'>
      <text class='price'>门店价 {{item.price}}</text>
    </view>
  </view>

</template>

car-new.wxss:

.car-new-item {
  width: 49%;
  font-size: 11pt;
  color: #353535;
  padding: 10rpx 0rpx;
}

.car-new-item view {
  margin-top: 10rpx;
}

.car-new-item image {
  width: 100%;
  height: 250rpx;
  border-radius: 5rpx;
}

.car-new-item .name {
  font-weight: 800;
}

.car-new-item .kind {
  font-size: 9pt;
}

.car-new-item .time {
  font-size: 9pt;
  color: #888;
}

.car-new-item .time view {
  width: 2rpx;
  height: 20rpx;
  background: #eee;
  margin: 0rpx 10rpx;
  display: inline-block;
}

.car-new-item .bottom {
  font-size: 9pt;
  color: #888;
}

.car-new-item .bottom .price {
  font-size: 11pt;
  color: #e64340;
  margin-right: 10rpx;
  font-weight: 800;
}

.car-new-item .bottom .price-old {
  font-size: 9pt;
  color: #888;
}

使用：
car.wxml:

  <import src='/template/car-new/car-new.wxml' />
  <view>
    <block wx:for='{{carList}}'>
      <template is='car_new' data='{{...item}}'></template>
    </block>
  </view>

car.wxss:

@import '/template/car-new/car-new.wxss';

car.js是请求数据并赋值的过程，代码略。
实现效果：

load-more.gif