小程序评分组件
说明
在豆瓣评分中，最终影视评分最大值是10分，而在影评时最大值是5星。
相比第一版比较：
- 评分组件最大值可调
- 代码有一定浓缩
如何实现
五角星也就两种状态，实星和空星。底部放置空星代表最大评分，顶部放置实星代表实际评分，只需计算出实星与空星的比例，使实星遮盖空星即可得到最终效果。前面的整星不用计算百分比，只需计算最后一个实星与空星的百分比即可。
简单计算流程：
五角星数量num: 5
最大评分max: 10
一颗星代表unit: max/num = 2
实际评分value: 7.3
去除整星剩余百分比percent: value%unit/unit
为避免计算精确问题从而使用整数运算
最终: percent = (value10)%(unit10)/(unit*10)
计算精度问题
使用外部字体
这里使用到了 FontAwesome，使用方法这里不细说，直接给地址吧
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1211
源码
rating.wxml
<template name="rating">
<view class='com-rating'>
<block wx:for='{{[1,2,3,4,5]}}' wx:key='*this'>
<view class='rating-on'
style='width:{{rating >= (max/5)*item ? 1 : rating < (max/5)*(item-1) ? 0 : (rating*10)%(max/5*10)/(max/5*10)}}em'
><i class='fa fa-star'></i></view>
<view class='rating-off'><i class='fa fa-star'></i></view>
</block>
</view>
</template>
rating.wxss
.com-rating {
display: inline-block;
font-size: 1.2em;
letter-spacing: .3em;
}
.com-rating .rating-on,
.com-rating .rating-off {
display: inline-block;
}
.com-rating .rating-on {
color: black;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
}
.com-rating .rating-off {
color: #DBDBDB;
padding: 0;
margin: 0;
}
使用
page.wxml
<import src='../rating/rating' />
...
<template is='rating' data='{{rating:7.3, max:10}}'></template>
page.wxss
@import '../rating/rating';
...
图标字体颜色均可调，我这里只讲了实现方式
TODO
- 用户可操作评分
- 大小及间距可调
- 默认配置
更多使用可以查看我开源的小程序
小程序
开源地址
