大家好！最近一直在做小程式開發，也做了幾個專案，開發期間涉及到很多列表頁面，之前每次都是在每個頁面的wxml和wxss頁面寫了很多佈局程式碼，感覺一直在做重用功，為了儘量減少程式碼量和後期維護的高效性，必須要走複用這步，查閱了很多資料，在這裡記錄一下，同時希望對新手小夥伴有所幫助！

1.首先我們建立一個template模板資料夾  建立2個檔案 listcell.wxml 和 listcell.wxss

 2.然後我們在listcell.wxml裡建立自己的cell ,直接上程式碼

<template name="list">
<view class="notify-object">
 <view class='hengxiang1'>
   <image class='cellnotifyImage' data-index="{{index}}" src="../../images/notify1.png" />
   <view class='shuxiang1'>
     <text class=' textblackColor sunFont10 textsub1'>{{item.titleName}}</text>
     <text class=' textblackColor70 sunFont8 textsub1'>{{item.profile}}</text>
     <text class=' textblackColor97 sunFont8 textsub2'>{{item.time}}</text>
   </view>
 </view>
</view>
</template> 
<template name="list1">
<view class="notify-object">
 <view class='hengxiang1'>
   <image class='cellnotifyImage' data-index="{{index}}" src="../../images/notify1.png" />
   <view class='shuxiang1'>
     <text class=' textblackColor sunFont10 textsub1'>{{item.title}}</text>
     <text class=' textblackColor70 sunFont8 textsub1'>{{item.phone}}</text>
     <text class=' textblackColor97 sunFont8 textsub2'>{{item.date}}</text>
   </view>
 </view>
</view>
</template>
 

listcell.wxss程式碼無須貼出 其中 < template name=“list” > 中name為該模板的名稱，在呼叫的時候，可根據不同的name來引用自己需要的模板。

這裡需要說一下，佈局相同的列表頁面cell都放在listcell.wxml裡即可，因為佈局一樣 ，共用一套wxss。佈局不相同的列表頁面cell 按照個人習慣了，也可以放在listcell.wxml裡寫 也可以再建立一個新的檔案去寫，所有不同佈局的cell都放到一個listcell.wxml裡寫的話，wxss裡程式碼會非常多，看起來不是很清晰。

3.呼叫template模板

在需要呼叫的列表頁面，引入模板檔案標頭檔案 在main.xml檔案裡 這樣匯入

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

在main.wxss檔案裡 匯入

@import "../../template/listcell.wxss";

需要說一下： 如果專案需要大量使用一個模板，WXSS引入到全域性(app.wxss 匯入 @import “template/listcell.wxss”)，減少程式碼量；如果專案只是很少地方使用模板，可以在需要的頁面引入WXSS。

在main.xml裡列表view中設定模板

<view class='sencondviewback2' style="height: {{screenHeight-315}}px;">
   <scroll-view scroll-y style="height: {{screenHeight-315}}px;">
   <template wx:for="{{notifyListData}}" is="list" data="{{item}}"></template>
   </scroll-view>
 </view>
 

通過template 標籤使用模板，template 標籤的 is 屬性與模板的 name 屬性對應，data 屬性代表傳入模板的資料

針對佈局一樣，頁面不同內容不同傳參肯定不同，可直接在listcell裡複製多個不同name的模板，修改引數即可。

如有不明白的小夥伴，可私信我！！！