⼩程序动态评分展⽰五⾓星展⽰半颗星展⽰⾃定义长度展⽰
⼀、前⾔
项⽬中遇到的评分相关的需求其实还挺多。之前也写过⽹页中关于评分功能实现的⽂档。这次，是基于⼩程序开发⽽提炼出⼀个简单⽅便使⽤的⽅法，⽹页开发中同样可⽤。这次使⽤的还是字体，主要是字体这个⽐较通⽤，颜⾊，⼤⼩都可以⾃⼰定义。当然了，来的最快的其实是⽤图⽚代替。
⼆、⼩程序中评分功能实现
1.css⽂件中引⼊字体⽂件。也可以
@font-face{
font-family:'FontAwesome';
src:url('netdna.bootstrapcdn/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1')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 >静态评价星级</view>
<view >4.50</view>
<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"><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分
margin属性值可以为百分比star_per:0,//⾃定义长度黄⾊五⾓星⼀开始需要打的是0分
}
})
3.根据返回的结果改变初始化的数据 ，⽐如，后台返回的评分是3.62分
var star="3.62";//后台获取的评分
var yellow_star=parseInt(star);//需要展⽰的整个黄⾊5⾓星，3.62分的时候需要展⽰3颗整个的黄⾊五⾓星。
var star_per=parseFloat(star-yellow_star)*100;//3.62颗评价分-3颗整个黄⾊星，是0.62的占⽐，先将它*100。这样赋值的时候⽐较⽅便。也就是⼀颗灰⾊的星星中展⽰出62%的黄⾊部位。
var gray_star=parseInt(5-star);//需要展⽰的灰⾊星星，正常是5-3.62=1.38颗，0.38颗已经是在百分⽐中了。所以此时最后需要展⽰的是1整个灰⾊五⾓星this.setData({
star:star,  //评分数
yellow_star:yellow_star,//整个黄⾊五⾓星的个数
star_per:star_per,//⼀颗灰⾊五⾓星中黄⾊五⾓星的占⽐
gray_star:gray_star,//整个灰⾊五⾓星的数量
})
4.最后⼀步就是页⾯中如何渲染的问题了。由于⼩程序中⽆法实现动态修改伪类元素的样式值【可能是我不会，会的同学可以指点⼀下】，所以，那颗占百分⽐的黄⾊五⾓星，我⽤的是底部⼀个灰⾊五⾓星+覆盖⼀个黄⾊五⾓星，都是⽤的绝对定位，最后黄⾊五⾓星⽤的是width+overflow:hidden 把多余的部位隐藏了。
<view>
<view >动态评价星级</view>
<view >{{star}}</view>
<view >
<view >
<view class="star" wx:for="{{yellow_star}}"><view class="icon icon_yellow"></view></view>
<view wx:if="{{star_per>0}}" class="star" >           
<view class="icon icon_gray"></view>           
<view class="icon icon_yellow "></view>        　
</view>
<view class="star" wx:for="{{gray_star}}"><view class="icon icon_gray"></view></view>
</view>
</view>
</view>
5.实现效果图如下：
五、总结
这个效果的实现⽆⾮就三点。第⼀点引⽤字体。第⼆点⽐较重要，就是如何⽤css画出想要的五⾓星，⾄于动态实现那块其实⼀点也不难，思路清晰了，⾃然就⽔到渠成了。如果觉得有不妥的地⽅还望赐教。觉得有更好的⽅法也可以分享⼀下哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。