微信小程式使用template標籤實現五星評分

前言

建立模版

wxml檔案：

以為根節點，新增name屬性用來區分不同模版：

}" src='/images/icon/none-star.png'> -->
}

wxss檔案：

.stars-container .stars .stars image .star-score

模版使用引用wxml模版：

引用wxss模版：

在使用模版檔案對應的wxss檔案中輸入以下表示式即可

@import "../stars/stars-template.wxss";

資料裝換：

我看到在使用模版wxml檔案時有個data=「}」屬性和資料，表示指定模版的資料，我們一般從後台獲取的評分資料一般都是乙個數字，比如：3.5，4，5等等，我們需要把這些數字轉換成五個等級陣列，決定評分星星顯示什麼，這裡我們用1表示顯示高亮的，0表示灰色星星，我們也可以在乙個2表示半顆高亮的星星表示0.5的評分：

function converttostarsarray(stars)  else 
} return array;
}

案例wxml**：

到這裡基本結束了，我們這評分轉換成我們需要的評分陣列，在使用模版的地方傳入資料即可。

微信小程式template使用

當您的專案需要多次使用同乙個布局和樣式的時候，您就可以考慮使用template 模板來減少冗餘使用方式 1.新建乙個template資料夾來存放您的通用模板 2.在資料夾裡面新建乙個wxml，wxss,進行模板和樣式的定義 3.設定模板的name，以及裡面您需要定義的wxml內容 4.設定wxs...

微信小程式使用template標籤實現五星評分

微信小程式template使用

微信小程式template使用

微信小程式template使用

相關推薦