快捷導(dǎo)航

微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示功能的實(shí)現(xiàn)

更新時(shí)間：2020年07月22日 14:51:09 作者：蘇小蘇sxs

這篇文章主要介紹了微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示的實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、前言

項(xiàng)目中遇到的評(píng)分相關(guān)的需求其實(shí)還挺多。之前也寫(xiě)過(guò)網(wǎng)頁(yè)中關(guān)于評(píng)分功能實(shí)現(xiàn)的文檔。這次，是基于微信小程序開(kāi)發(fā)而提煉出一個(gè)簡(jiǎn)單方便使用的方法，網(wǎng)頁(yè)開(kāi)發(fā)中同樣可用。這次使用的還是字體，主要是字體這個(gè)比較通用，顏色，大小都可以自己定義。當(dāng)然了，來(lái)的最快的其實(shí)是用圖片代替。

二、微信小程序中評(píng)分功能實(shí)現(xiàn)

1.css文件中引入字體文件。也可以點(diǎn)此下載字體文件

@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.根據(jù)自己項(xiàng)目的需求寫(xiě)出五角星的樣式。參考下面

.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)實(shí)現(xiàn)五角星評(píng)分

1.如果是靜態(tài)實(shí)現(xiàn)，可以直接設(shè)置寬度來(lái)實(shí)現(xiàn)評(píng)分效果，直接定義需要變色的五角形的比例。如果是顆星可以直接定義偽類(lèi)元素寬度是50%；如果是1/3顆星可以定義寬度是33%；同樣的，如果是2/3顆星星，直接定義寬度為66%。如下

/*自定義長(zhǎng)度的黃色五角星*/
.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)評(píng)價(jià)星級(jí)</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.實(shí)現(xiàn)效果如下圖

四、動(dòng)態(tài)實(shí)現(xiàn)評(píng)價(jià)打分效果

1.樣式同（二、微信小程序中評(píng)分功能實(shí)現(xiàn)）上。只是定義寬度的地方是動(dòng)態(tài)賦值的。

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

Page({
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: { 
 yellow_start:0,//黃色五角星，默認(rèn)一開(kāi)始是黃色星星0分
 gray_start:5,//灰色五角星 灰色星星是5顆 表示是5分
 start_per:0,//自定義長(zhǎng)度黃色五角星 一開(kāi)始需要打的是0分
 }
})

3.根據(jù)返回的結(jié)果改變初始化的數(shù)據(jù) ，比如，后臺(tái)返回的評(píng)分是3.62分

var start="3.62";//后臺(tái)獲取的評(píng)分
var yellow_start=parseInt(start);//需要展示的整個(gè)黃色5角星，3.62分的時(shí)候需要展示3顆整個(gè)的黃色五角星。
var start_per=parseFloat(start-yellow_start)*100;//3.62顆評(píng)價(jià)分-3顆整個(gè)黃色星，是0.62的占比，先將它*100。這樣賦值的時(shí)候比較方便。也就是一顆灰色的星星中展示出62%的黃色部位。
var gray_start=parseInt(5-start);//需要展示的灰色星星，正常是5-3.62=1.38顆，0.38顆已經(jīng)是在百分比中了。所以此時(shí)最后需要展示的是1整個(gè)灰色五角星
this.setData({ 
 start:start, //評(píng)分?jǐn)?shù)  
 yellow_start:yellow_start,//整個(gè)黃色五角星的個(gè)數(shù)
 start_per:start_per,//一顆灰色五角星中黃色五角星的占比
 gray_start:gray_start,//整個(gè)灰色五角星的數(shù)量
})

4.最后一步就是頁(yè)面中如何渲染的問(wèn)題了。由于微信小程序中無(wú)法實(shí)現(xiàn)動(dòng)態(tài)修改偽類(lèi)元素的樣式值【可能是我不會(huì)，會(huì)的同學(xué)可以指點(diǎn)一下】，所以，那顆占百分比的黃色五角星，我用的是底部一個(gè)灰色五角星+覆蓋一個(gè)黃色五角星，都是用的絕對(duì)定位，最后黃色五角星用的是width+overflow:hidden 把多余的部位隱藏了。

<view>
  <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">動(dòng)態(tài)評(píng)價(jià)星級(jí)</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>

5.實(shí)現(xiàn)效果圖如下：

五、總結(jié)

這個(gè)效果的實(shí)現(xiàn)無(wú)非就三點(diǎn)。第一點(diǎn)引用字體。第二點(diǎn)比較重要，就是如何用css畫(huà)出想要的五角星，至于動(dòng)態(tài)實(shí)現(xiàn)那塊其實(shí)一點(diǎn)也不難，思路清晰了，自然就水到渠成了。

到此這篇關(guān)于微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序評(píng)分展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: