前言
創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)祁連,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
微信小程序特點(diǎn)“無(wú)須安裝，無(wú)須卸載，觸手可及，用完即走”，適合輕量級(jí)應(yīng)用快速開(kāi)發(fā)。小程序模版思想是它開(kāi)發(fā)的核心思想，可以幫助開(kāi)發(fā)者減少很多重復(fù)代碼，我們來(lái)看看怎么在小程序中實(shí)現(xiàn)市面上常用的評(píng)分組件, 看看效果圖：
創(chuàng)建模版
wxml文件：
以為根節(jié)點(diǎn)，添加name屬性用來(lái)區(qū)分不同模版：
{{score}}
wxss文件：
這里我們采用小程序推薦使用flex模型，橫向排列五顆星星圖片。
重慶分公司
重慶分公司
.stars-container {
display: flex;
flex-direction: row;
}
.stars {
display: flex;
flex-direction: row;
height: 17rpx;
margin-right: 24rpx;
margin-top: 6rpx;
}
.stars image {
padding-left: 3rpx;
height: 17rpx;
width: 17rpx;
}
.star-score {
color: #1f3463;
}模版使用
引用wxml模版：
引用wxss模版：
在使用模版文件對(duì)應(yīng)的wxss文件中輸入以下表達(dá)式即可
@import "../stars/stars-template.wxss";
數(shù)據(jù)裝換：
我看到在使用模版wxml文件時(shí)有個(gè)data=“{{stars:stars,score:average}}”屬性和數(shù)據(jù)，表示指定模版的數(shù)據(jù)，我們一般從后臺(tái)獲取的評(píng)分?jǐn)?shù)據(jù)一般都是一個(gè)數(shù)字，比如：3.5，4，5等等，我們需要把這些數(shù)字轉(zhuǎn)換成五個(gè)等級(jí)數(shù)組，決定評(píng)分星星顯示什么圖片，這里我們用1表示顯示高亮的，0表示灰色星星，我們也可以在一個(gè)2表示半顆高亮的星星表示0.5的評(píng)分：
function convertToStarsArray(stars) {
var num = stars.toString().substring(0, 1);
var array = [];
for (var i = 1; i <= 5; i++) {
if (i < num) {
array.push(1);
} else {
array.push(0);
}
}
return array;
}
案例wxml代碼：
到這里基本結(jié)束了，我們這評(píng)分轉(zhuǎn)換成我們需要的評(píng)分?jǐn)?shù)組，在使用模版的地方傳入數(shù)據(jù)即可。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
