微信小程序動態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示

項目中遇到的評分相關的需求其實還挺多。之前也寫過網頁中關于評分功能實現的文檔沼本。這次敬察，是基于微信小程序開發(fā)而提煉出一個簡單方便使用的方法，網頁開發(fā)中同樣可用币他。這次使用的還是字體坞靶，主要是字體這個比較通用，顏色蝴悉，大小都可以自己定義彰阴。當然了，來的最快的其實是用圖片代替拍冠。

二尿这、微信小程序中評分功能實現

1.css文件中引入字體文件。也可以點此下載字體文件

@font-face {

? font-family: 'FontAwesome';

? src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); }

2.根據自己項目的需求寫出五角星的樣式庆杜。參考下面

正在上傳... 取消

.start{margin-right:10rpx;}/*五角星之間的間距*//*五角星*/.start .icon:before {content: '\f005'; font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block;? overflow: hidden;}.start .icon {display: block; font-size: 21px; text-align: center; width: 38rpx;height: 56rpx;line-height: 56rpx;position: relative;white-space: pre;}/*灰色五角星*/.start .icon_gray{color:#aaa}/*黃色五角星*/.start .icon_yellow:before {color: #F63;}

三射众、靜態(tài)實現五角星評分

1.如果是靜態(tài)實現，可以直接設置寬度來實現評分效果晃财，直接定義需要變色的五角形的比例叨橱。如果是顆星可以直接定義偽類元素寬度是50%；如果是1/3顆星可以定義寬度是33%拓劝；同樣的雏逾，如果是2/3顆星星，直接定義寬度為66%郑临。如下

/*自定義長度的黃色五角星*/.half_star .icon_yellow:before {width: 50%;}

2.html的代碼如下

正在上傳... 取消

? <view ><view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">靜態(tài)評價星級</view><view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">4.50</view><view style="width:105px;margin:0 auto"><view style="display:flex;"><view class="start"><view class="icon icon_yellow"></view></view><view class="start"><view class="icon icon_yellow"></view></view><view class="start"><view class="icon icon_yellow"></view></view><view class="start"><view class="icon icon_yellow"></view></view><view class="start half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view></view></view></view>

正在上傳... 取消

3.實現效果如下圖

正在上傳... 取消

四栖博、動態(tài)實現評價打分效果

1.樣式同（二、微信小程序中評分功能實現）上厢洞。只是定義寬度的地方是動態(tài)賦值的仇让。

2.定義需要展示的初始屬性值。分別是要展示的黃色五角星躺翻，灰色五角星丧叽，以及那顆需要打分的的黃色五角星

正在上傳... 取消

Page({

? /**

? * 頁面的初始數據

? */? data: {?

? ? yellow_start:0,//黃色五角星，默認一開始是黃色星星0分gray_start:5,//灰色五角星灰色星星是5顆表示是5分start_per:0,//自定義長度黃色五角星? 一開始需要打的是0分? }

})

正在上傳... 取消

3.根據返回的結果改變初始化的數據公你，比如踊淳，后臺返回的評分是3.62分

正在上傳... 取消

varstart="3.62";//后臺獲取的評分varyellow_start=parseInt(start);//需要展示的整個黃色5角星，3.62分的時候需要展示3顆整個的黃色五角星。varstart_per=parseFloat(start-yellow_start)*100;//3.62顆評價分-3顆整個黃色星迂尝，是0.62的占比脱茉，先將它*100。這樣賦值的時候比較方便垄开。也就是一顆灰色的星星中展示出62%的黃色部位琴许。vargray_start=parseInt(5-start);//需要展示的灰色星星，正常是5-3.62=1.38顆溉躲，0.38顆已經是在百分比中了榜田。所以此時最后需要展示的是1整個灰色五角星this.setData({?

? ? start:start,? //評分數? ? ? yellow_start:yellow_start,//整個黃色五角星的個數start_per:start_per,//一顆灰色五角星中黃色五角星的占比gray_start:gray_start,//整個灰色五角星的數量})

正在上傳... 取消

4.最后一步就是頁面中如何渲染的問題了。由于微信小程序中無法實現動態(tài)修改偽類元素的樣式值【可能是我不會锻梳，會的同學可以指點一下】箭券，所以，那顆占百分比的黃色五角星唱蒸，我用的是底部一個灰色五角星+覆蓋一個黃色五角星邦鲫，都是用的絕對定位，最后黃色五角星用的是width+overflow:hidden 把多余的部位隱藏了神汹。

正在上傳... 取消

<view><view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">動態(tài)評價星級</view><view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">{{start}}</view><view style="width:105px;margin:0 auto"><view style="display:flex;"><view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view><view wx:if="{{start_per>0}}" class="start" style="position:relative;">

view class="icon icon_gray"></view>

view class="icon icon_yellow "style="width:{{start_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>

view><view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view></view></view></view>

龍華大道1號http://www.kinghill.cn/LongHuaDaDao1Hao/index.html