1、常见的黄白情况
2、存在半个的情况
这种情况下,1代表黄色星星,2代表半个黄色半个白色;0代表白色星星。
代码如下:
function converToStarsArray(stars){
var array=[];
//如果为整数0,1,2,3,4,5
if(stars.toString().length==1){
var num=stars.toString().substring(0,1);
for(var i=1;i<=5;i++){
if(i<=num){
array.push(1);
}else {
array.push(0);
}
}
}else{
//如果是0.5,1.5,2.5,3.5,4.5
var num=stars.toString().substring(0,1);
for(var i=1;i<=5;i++){
if(i<=num){
array.push(1);
}else {
array.push(0);
}
}
array[num]=2;
}
return array;
}
console.log(converToStarsArray(1.5));
3、还可以使用雪碧图的方法;
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片;base64图片设置步骤如下:
1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本
2.在WXSS中使用以上文本:
background-image: url("data:image/png;base64,iVBORw0KGgo=...");
3.为了是背景图片自适应宽高,可以做如下设置:
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
然后通过不同的calss来控制,这个方法存在问题,就是如果单纯是黄色没问题;
4、通过image在线引用之后,使用left及overflow:hidden的方法,加上class类进行控制,可以实现黄色及白色的情况,但是对于一半黄色,一半白色,就显得那么无能微利了。
建议最好的办法,还是使用第二种方法,在小程序中,这个思路是最佳的方法