小程序干活系列----小星星打分

二话不说先上图

简介：
优点：星星数量、选中的颜色、未选中颜色、星星大小都是可以自己控制的
缺点：只支持小星星，因为采用的并不是图片，而是星星文字

有兴趣的通知可以将星星改成字体图标，实现原理相同。这样只支持小星星的缺点也就不存在了。

实现方式：
核心代码：

for (var i = 0; i < a.index + 1; i++) {
    list[i].color = that.data.starColorc;
  }
  for (var j = a.index + 1; j < that.data.starNum; j++) {
    list[j].color = that.data.starColor;
  }

<template name="star">
  <view style='display: flex;flex-direction: row;'>
    <block wx:for='{{starList}}' wx:key='{{*this}}'>
      <view style='color:{{item.color}};font-size:{{item.size+"rpx"}};margin:0 17rpx;' data-color='{{item.color}}' data-index='{{index}}' bindtap='starClick'>★</view>
    </block>
  </view>
</template>

小星星是根据传进来的星星个数动态生成的，所以单击的时候能够取得小星星的下标，包含下标以前的小星星都是选中的颜色，下标以后的小星星都是未选中的颜色，所以有俩个for循环
其中的a.index是下标，starColorc是选中的颜色，starNum是星星数量，starColor是未选中的颜色

使用方式：
wxml界面

<import src="/star/star.wxml" />
<template is="star" data="{{starList}}" />

js界面

var star = require('../../star/star.js');
/**
 * 初始化小星星
 * num:几个小星星
 * colorc:选中的小星星的颜色
 * color:未选中的小星星的颜色
 * size:字体大小
 */
star.starInit(this,5,"#ffcd1e","#eeeeee","70");
/**
 * 展示小星星，而不能够选择小星星的初始化方式
 * 在num参数后面加入了初始分值的参数
 */
 star.defaultInit(this, 5, 4,"#ffcd1e", "#eeeeee", "70");

相关代码（有空会将前面的日期控件一并提交到github上，采取跟微信小程序demo案例一样的格式分功能展示模块）：
码云：https://gitee.com/mrxu314/xcx_gh
gitHub：https://github.com/mrxu0/xcx_gh

wxml：

<template name="star">
  <view style='display: flex;flex-direction: row;'>
    <block wx:for='{{starList}}' wx:key='{{*this}}'>
      <view style='color:{{item.color}};font-size:{{item.size+"rpx"}};margin:0 17rpx;' data-color='{{item.color}}' data-index='{{index}}' bindtap='starClick'>★</view>
    </block>
  </view>
</template>

js：

/**
 * 初始化小星星
 * num:几个小星星
 * colorc:选中的小星星的颜色
 * color:未选中的小星星的颜色
 * size:字体大小
 */
var that;
function starInit(target,starNum = 5, colorc = "red", color = "#eeeeee", size = 26) {
  that=target;
  var list = [];
  for (var i = 0; i < starNum; i++) {
    list.push({
      color: color,
      size: size
    })
  }
  that.setData({
    starList: list,
    starColorc: colorc,
    starColor: color,
    starNum: starNum
  });
  that.starClick = starClick;
}
/**
 * 默认分数
 */
function defaultInit(target, starNum = 5,targetNum=2, colorc = "red", color = "#eeeeee", size = 26){
  that = target;
  var roundedNum = Math.round(targetNum);
  var list = [];
  for (var i = 0; i < roundedNum; i++) {
    list.push({
      color: colorc,
      size: size
    })
  }
  for (var j = roundedNum; j < starNum; j++) {
    list.push({
      color: color,
      size: size
    })
  }
  that.setData({
    starList: list
  });
}
/**
 * 单击改变小星星的颜色,并且获取分值
 */
function starClick(e) {
  var a = e.currentTarget.dataset;
  var list = that.data.starList;
  for (var i = 0; i < a.index + 1; i++) {
    list[i].color = that.data.starColorc;
  }
  for (var j = a.index + 1; j < that.data.starNum; j++) {
    list[j].color = that.data.starColor;
  }
  that.setData({
    starList: list,
    starPoints:a.index+1
  });
}

module.exports = {
  starInit: starInit,
  defaultInit: defaultInit
}

想第一手获得博主发布的信息可以关注博主微信公众号，感谢观看