前言

上一篇我們實現了購物車功能，裡面有用到template模板功能來實現購物車商品數量加減和價格計算功能，可能篇幅過長介紹的並不清楚，本篇將詳細介紹一下template模板來減少冗餘程式碼。

模板

WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫。

定義模板

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

template.wxml

<template name="quantity">
  <!-- 主容器 -->  
  <view class="stepper">  
      <!-- 減號 -->
 
  
      <text class="{{count <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  
      <!-- 數值 -->  
      <input type="number" bindchange="bindManual" value="{{count}}"  disabled="disabled"/>  
      <!-- 加號 -->  
      <text class
 
="{{count >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  
  </view>  </template>

template.wxss

/*主容器*/  .stepper {  
    width:90px;  
    height: 26px;  
    /*給主容器設一個邊框*/  
    border: 1rpx solid #000000;  
    border-radius: 3px;  
    margin:0 auto;  
}  
  /*加號和減號*/
 
  .stepper text {  
    width: 24px;  
    line-height: 26px;  
    text-align: center;  
    float: left;  
}  
  /*數值*/  .stepper input {  
    width: 40px;  
    height: 26px;  
    float: left;  
     margin: 0 auto;   
    text-align: center;  
    font-size: 12px;  
    color: #000000;    /*給中間的input設定左右邊框即可*/  
    border-left: 1rpx solid #000000;  
    border-right: 1rpx solid #000000;  
}  
  /*普通樣式*/  .stepper .normal{  
    color: black;  
}  
  /*禁用樣式*/  .stepper .disabled{  
    color: #ccc;  
}  

使用模板

使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如：

test.wxml

<import src="../template/template.wxml" /><view wx:for="{{items}}">
  <view class="temp-view">
    <template is="quantity" data="{{ ...item,index:index}}" />
  </view> </view>

test.js

#初始化資料
data: {    
    items: [
      {
        id: 1,
        isSelect: false,
        // 資料設定
        count: 2
      },
      {        id: 2,
        isSelect: true,
        // 資料設定
        count: 1
      },
      {        id: 3,
        isSelect: true,
        // 資料設定
        count: 1
      }
    ]
  },

/* 加數 */
  addCount: function (e) {    
    var index = e.target.dataset.index;    
    console.log("剛剛您點選了加+");    
    var count = this.data.items[index].count;    // 商品總數量+1  
    if (count < 10) {      
        this.data.items[index].count++;
    }    
    // 將數值與狀態寫回  
    this.setData({      
        items: this.data.items
    });    
    console.log("items:" + this.data.items);
  },

 /* 減數 */
  delCount: function (e) {    
     var index = e.target.dataset.index;    
     console.log("剛剛您點選了加一");    
     var count = this.data.items[index].count;    // 商品總數量-1
    if (count > 1) {      
         this.data.items[index].count--;
    }    
    // 將數值與狀態寫回  
    this.setData({      
        items: this.data.items
    });    
    console.log("items:" + this.data.items);
  },

模板作用域

模板擁有自己的作用域，只能使用 data 傳入的資料以及模版定義檔案中定義的 <wxs /> 模組。

更多精彩內容

關注我們

如果需要原始碼可以關注“IT實戰聯盟”公*眾*號並留言（原始碼名稱+郵箱），小萌看到後會聯絡作者傳送到郵箱，也可以加入交流群和作者互撩哦~~~