溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了微信小程序如何實現動態評分展示/五角星展示/半顆星展示/自定義長度展示功能，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
一、前言
項目中遇到的評分相關的需求其實還挺多。之前也寫過網頁中關于評分功能實現的文檔。這次，是基于微信小程序開發而提煉出一個簡單方便使用的方法，網頁開發中同樣可用。這次使用的還是字體，主要是字體這個比較通用，顏色，大小都可以自己定義。當然了，來的最快的其實是用圖片代替。
二、微信小程序中評分功能實現
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;}三、靜態實現五角星評分
1.如果是靜態實現，可以直接設置寬度來實現評分效果，直接定義需要變色的五角形的比例。如果是顆星可以直接定義偽類元素寬度是50%；如果是1/3顆星可以定義寬度是33%；同樣的，如果是2/3顆星星，直接定義寬度為66%。如下
/*自定義長度的黃色五角星*/
.half_star .icon_yellow:before {width: 50%;} 2.html的代碼如下
<view >
<view >靜態評價星級</view>
<view >4.50</view>
<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"><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.實現效果如下圖
四、動態實現評價打分效果
1.樣式同（二、微信小程序中評分功能實現）上。只是定義寬度的地方是動態賦值的。
2.定義需要展示的初始屬性值。分別是要展示的黃色五角星，灰色五角星，以及那顆需要打分的的黃色五角星
Page({
/**
* 頁面的初始數據
*/
data: {
yellow_start:0,//黃色五角星，默認一開始是黃色星星0分
gray_start:5,//灰色五角星 灰色星星是5顆 表示是5分
start_per:0,//自定義長度黃色五角星 一開始需要打的是0分
}
})3.根據返回的結果改變初始化的數據 ，比如，后臺返回的評分是3.62分
var start="3.62";//后臺獲取的評分
var yellow_start=parseInt(start);//需要展示的整個黃色5角星，3.62分的時候需要展示3顆整個的黃色五角星。
var start_per=parseFloat(start-yellow_start)*100;//3.62顆評價分-3顆整個黃色星，是0.62的占比，先將它*100。這樣賦值的時候比較方便。也就是一顆灰色的星星中展示出62%的黃色部位。
var gray_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.最后一步就是頁面中如何渲染的問題了。由于微信小程序中無法實現動態修改偽類元素的樣式值【可能是我不會，會的同學可以指點一下】，所以，那顆占百分比的黃色五角星，我用的是底部一個灰色五角星+覆蓋一個黃色五角星，都是用的絕對定位，最后黃色五角星用的是width+overflow:hidden 把多余的部位隱藏了。
<view>
<view >動態評價星級</view>
<view >{{start}}</view>
<view >
<view >
<view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view>
<view wx:if="{{start_per>0}}" class="start" >
<view class="icon icon_gray"></view>
<view class="icon icon_yellow "></view>
</view>
<view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view>
</view>
</view>
</view> 5.實現效果圖如下：
五、總結
這個效果的實現無非就三點。第一點引用字體。第二點比較重要，就是如何用css畫出想要的五角星，至于動態實現那塊其實一點也不難，思路清晰了，自然就水到渠成了。
以上就是關于微信小程序如何實現動態評分展示/五角星展示/半顆星展示/自定義長度展示功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
