小程序中，打星星的方法
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类进行控制，可以实现黄色及白色的情况，但是对于一半黄色，一半白色，就显得那么无能微利了。
建议最好的办法，还是使用第二种方法，在小程序中，这个思路是最佳的方法
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-08-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读