微信小程序星星评分代码片段（含半星）

写代码时需要一个点击星星评分的功能
安卓直接用RatingBar非常轻松的解决了
到了小程序，没有现成的封装方法可以用了，只能自己敲一个
(太难了，连图都是自己用PS切)

成果图:

代码思路

先从简单的分析，我们先不考虑半颗星星的情况，
那这样就是 总共5分 5颗星星

新建数组[0,0,0,0,0]作为 为没有评分时的初始状态
（我们规定0为没有选中，1为选中状态）

假设我们现在点击了第一颗星星，那么数组就对应变化为[1,0,0,0,0]

再点击其他星星，数组变化也就一目了然了,就是对应元素0->1的变化
思路很清晰了，代码也就很简单啦

接下来我们分析复杂的情况，也就是有半颗星星的情况

首先，我们来看一张示例图

图片我们能看到四种不同的半颗星星

我们规定它们分别为1，2，3，4（和图片顺序相同）

那么我们的初始状态就应该是
[3,4,3,4,3,4,3,4,3,4]

很好！ 我们再看一张示意图(下图)来观察规律

相信屏幕前的你可以很简单的写出对应的数组了
没错！就是[1,2,1,4,3,4,3,4,3,4]

思路已经逐渐清晰起来，假设我们点击了第m个"半颗星星"，那么m后面依然是3,4,3,4…的循环，而m前面则是1,2,1,2…的循环

这里我们已经可以把对应代码写出来了

var s = new Array();
for (var i = 0; i < 10; i++) {
      if (i <= m) {//选中高亮的星星
        if (i % 2 == 1) {//奇数
          s[i] = 2
        } else if (i % 2 == 0) {//偶数
          s[i] = 1
        }
      } else {//没有选中的星星
        if (i % 2 == 1) {//奇数
          s[i] = 4
        } else if (i % 2 == 0) {//偶数
          s[i] = 3
        }
      }
    }

这里楼主是通过判断奇偶来判断它是前半颗星星，还是后半颗星星

好了，代码就分析到这里了，不卖关子了，完整的代码奉上：

完整代码

index.js

Page({
  data: {
    score: [3, 4, 3, 4, 3, 4, 3, 4, 3, 4],
    grade:0
  },
  log: function (e) {
    var index = e.currentTarget.dataset.index;
    console.log(index)
    var s = new Array();
    for (var i = 0; i < 10; i++) {
      if (i <= index) {
        if (i % 2 == 1) {
          s[i] = 2
        } else if (i % 2 == 0) {
          s[i] = 1
        }
      } else {
        if (i % 2 == 1) {
          s[i] = 4
        } else if (i % 2 == 0) {
          s[i] = 3
        }
      }
    }
    this.setData({
      score: s,
      grade: index + 1
    })
  },

})

index.wxml

<view class="A">
  <view  wx:for='{{score}}' wx:for-item="item" style='{{(item==1||item==2)?"color:blue;":"color:red"}}' data-index='{{index}}' bindtap="log">{{item}}
  </view>
</view>

<view class="A">
  <view  wx:for='{{score}}' wx:for-item="item" style='{{"item==1||item==2"?"color:blue;":"color:red"}}' data-index='{{index}}' bindtap="log">
    <image wx:if="{{item==1}}" src="../../img/s1.png" class="small_pic" ></image>
    <image wx:if="{{item==2}}" src="../../img/s2.png" class="small_pic" ></image>
    <image wx:if="{{item==3}}" src="../../img/s3.png" class="small_pic" ></image>
    <image wx:if="{{item==4}}" src="../../img/s4.png" class="small_pic" ></image>
  </view>
</view>

<view>当前分数：{{grade}}</view>

index.wxss

.A{
  display: flex;
  flex-direction: row;
}
.small_pic{
  height: 69rpx;
  width: 36rpx;
}

代码片段

1. 启动微信小程序开发工具，点击 代码片段 可查看
2. CSDN源码下载 链接

图片资源

大家需要的话，点击鼠标右键，图片另存为就可以了