微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

更新时间:2023-04-03 19:00:29 阅读：评论：0

一、前言

项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次，是基于微信小程序开发而提炼出一个简单方便使用的方法，网页开发中同样可用。这次使用的还是字体，主要是字体这个比较通用，颜色，大小都可以自己定义。当然了，来的最快的其实是用图片代替。

二、微信小程序中评分功能积极的个性签名实现

1.css文件中引入字体文件。也可以点此下载字体

@fo中国供销合作社nt-face {    font-family: 'FontAwesome';    src: url('/d/file/titlepic/fontawesome-webfont.woff format('woff'); }

2.根据自己项目的需求写出五角星的样式。参考下面

.star{margin-right:10rpx;}/*五角星之间的间距*//*五角星*/.star .icon:before {content: '\f005';开发银行助学贷款系统 font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block;  overflow: hidden;}.star .icon {display: block; font-size: 21px; text-align: center; width: 38rpx;height: 56rpx;line-height: 56rpx;position: relative;white-space: pre;}/*灰色五角星*/.star .icon_gray{color:#aaa}/*黄色五角星*/.star .icon_yellow:before {color: #F63;}

三、静态实现五角星评分

1.如果是静态实现，可以直接设置宽度来实现评分效果，直接定义需要变色的五角形的比例。如果是颗星可以直接定义伪类元素宽度是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;">静态评价星级</view>        <view s北爱电影tyle="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="star"><view class="icon icon_yellow"></view></view>                <view class="star"><view class="icon icon_yellow"></view></view>                <view class="star"><view class="icon icon_yellow"></view></view>                <view class="star"><view class="icon icon_yellow"></view></view>                <view class="star half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view>            </view>                </view>                     </view>

3.实现效果如下图

四、动态实现评价打分效果

1.样式同（二、微信小程序中评分功能实现）上。只是定义宽度的地方是动态赋值的。
2.定义需要展示的初始属性值。分别是要展示的黄色五角星，灰色五角星，以及那颗需要打分的的黄色五角星。

Page({  /** * 页面的初始数据 */  data: {        yellow_star:0,//黄色五角星，默认一开始是黄色星星0分    gray_star:5,//灰色五角星 灰色星星是5颗 表示是5分    star_per:0,//自定义长度黄色五角星  一开始需要打的是0分  }})

3.根据返回的结果改变初始化的数据，比如，后台返回的评分是3.62分

var star="3.62";//后台获取的评分var yellow_star=parInt(star);//需要展示的整个黄色5角星，3.62分的时候需要展示3颗整个的黄色五角星。var star_per=parFloat(star-yellow_star)*100;//3.62颗评价分-3颗整个黄色星，是0.62的占比，先将它*100。这样赋值的时候比较方便。也就是一颗灰色的星星中展示出62%的黄色部位。var gray_star=parInt(5-star);//需要展示的灰色星星，正常是5-3.62=1.38颗，0.38颗已经是在百分比中了。所以此时最后需要展示的是1整个灰色五角星 this.tData({        star:star,  //评分数           yellow_star:yellow_star,//整个黄色五角星的个数    star_per:star_per,//一颗灰色五角星中黄色五角星的占比    gray_star:gray_star,//整个灰色五角星的数量})

4.最后一步就是页面中如何渲染的问题了。由于微信小程序中无法实现动态修改伪类元素的样式值【可能是我不会，会的同学可以指点一下】，所以，那颗占百分比的黄色五角星，我用的是底部一个灰色五角星+覆盖一个黄色五角星，都是用的绝对定位，最后黄色五角星用的是width+overflow:hidden 把多余的部位隐藏了。

<view>        <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">动态评价星级</view>        <view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">{{star}}</view>        <view style="width:105px;margin:0 auto">            <view浔阳楼在哪里 style="display:flex;"> <view class="star" wx:for="{{yellow_star}}"><view class="icon icon_yellow"></view></view> <view wx:if="{{star_per>0}}" class="star" style="position:relative;">　　　　　　　　　　　　 <view class="icon icon_gray"></view>　　　　　　　　　　　　 <view class="icon icon_yellow "style="width:{{star_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>　　　　　　　　　 </view> <view class="star" wx:for="{{gray_star}}"><view class="icon icon_gray"></view></view>            </view>             </view>            </view>