模板template的使用,

如下圖，我們經常做這樣的列表頁，課程搜尋結果頁和課程列表頁結構是完全一樣的，非常適合使用模板來完成頁面搭建。

這樣我們就不用寫那些重複的程式碼了,而且修改介面的時候也只需要改動模板一個地方

一、定義模板
1、新建一個template資料夾用來管理專案中所有的模板； 
2、新建一個personCourseTmp.wxml檔案來定義模板； 

3、使用name屬性，作為模板的名字。然後在<template/>內定義程式碼片段。

那我們開始實現吧,建模板2個檔案

personCourseTmp.wxml

<template name="personCourseItemTmp">
  <view class="courses-list" style='background-image: url("{{cardImage}}")'>

    <view class="money-border"> ￥
    <text class="money">{{cardMoney}}</text>/課時</view>

    <view class="name">
       <text class="ename">GillMo</text>
       <text class="cname">.小川</text>
    </view>

    <view class="mark">
      <view>{{cardMark}}</view>
    </view>
    
  </view>
</template>
 

樣式檔案personCourseTmp.wxss

.courses-list {
  height: 342rpx;
  margin: 40rpx auto;
  border-top: 2rpx solid #f0f0f0;
  margin-top: 10rpx;
   flex-direction: column;
  align-items: flex-start;
  width: 670rpx;
  border-radius: 8px;
}

.money-border {
  font-family: PingFangSC-Semibold;
  font-size: 28rpx;
  color: #fff;
  letter-spacing: -0.41px;
  height: 56rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.money {
  font-size: 40rpx;
}

.name {
  margin-top: 158rpx;
  margin-left: 20rpx;
  font-family: PingFangSC-Semibold;
  color: #fff;
  letter-spacing: -0.41px;
}

.ename {
  font-size: 40rpx;
}

.cname {
  font-size: 30rpx;
}

.mark {
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #fff;
  margin-left: 20rpx;
  letter-spacing: -0.41px;
  margin-bottom: 18rpx;
}
 

那我們如何在頁面上使用呢,引入樣式檔案和檢視檔案

比如我們要在Course.wxss上面引入樣式檔案

只需要在Course.wxss裡面加入上面的程式碼

我們要在Course.wxml上面引入檢視檔案

<import src="../template/personCourseTmp.wxml" />

    <block wx:for="{{goodlist}}" wx:key="idx">
        <template is="personCourseItemTmp" data="{{...item}}"></template>
      </navigator>
    </block>
 

傳資料時item前面加三個點... 模板裡面就不需要寫item了,

如果要傳多個數據到模板

<view class="tab-list" wx:for="{{list}}" wx:key="index">
          <template is="day-tab" data="{{item,index:index,currentTarget:currentTarget}}" wx:key="index"></template>
 </view>