微信小程序订单评价打分星星

目前服务类的小程序中服务评价似乎是一项不可获取的功能，一般为五颗星星，点击对应星星就是点亮之前的星星，达到打分的目的，此文就简单叙述下我实现该功能的思路：

在data数据中，设置评分星星的状态数组，每颗星星有两个状态（选中/未选中），两个不同的状态时Image控件scr的图片，每个星星绑定当前星星位置的数值（position）便于点击星星事件发生时获取点击位置，当获取到点击位置星星时，将数列中position左边的各个布尔值修改为true,右边修改为false，同时改变右侧显示文字,界面上就实现了点击星星进行评分的功能了：

  data: {
    star_1:[true,true,true,true,true],
    star_2:[true,true,true,true,true],
    star_3:[true,true,true,true,true],
    label_1:"无可挑剔",
    label_2:"无可挑剔",
    label_3:"无可挑剔",
  },

wxml文件：

绑定的数值

index：三行星星的行号；position：当前星星在该行中的位置

<image wx:for = "{{star_1}}" wx:key = "id" class="wx-image_ekg7VL"  mode="scaleToFill" src= "{{item ? 
'http://qty83k.creatby.com/materials/169856/origin/d9d9b9870675197ca1a94f5eb9cb4e64_origin.
png' : 'http://qty83k.creatby.com/materials/169856/origin/6c8e0055ad65e844f385da279d092277_origin.
png'}}" bindtap="onStarCliceked" data-index="0" wx:for-index = "position" 
data-position="{{position}}" style="background-size:  100% 100%; background-position:  0% 0%; background-repeat:  no-repeat;"/>

注意：此处绑定位置position不能直接data-position=index,需要为循环新增一个索引值position，将索引position绑定给data-position

js文件：

  onStarCliceked:function(e){
    var index = e.currentTarget.dataset.index
    var position = e.currentTarget.dataset.position
    switch(index){
      case "0":{
        for(var i=0;i<5;i++){
          if(i<=position)
            this.data.star_1[i] = true
          else
            this.data.star_1[i] = false
        }
        var text = this.getText(position)
        this.setData({
          star_1:this.data.star_1,
          label_1:text
        })
        break;
      }
      case "1":{
        for(var i=0;i<5;i++){
          if(i<=position)
            this.data.star_2[i] = true
          else
            this.data.star_2[i] = false
        }
        var text = this.getText(position)
        this.setData({
          star_2:this.data.star_2,
          label_2:text
        })
        break;
      }
      case "2":{
        for(var i=0;i<5;i++){
          if(i<=position)
            this.data.star_3[i] = true
          else
            this.data.star_3[i] = false
        }
        var text = this.getText(position)
        this.setData({
          star_3:this.data.star_3,
          label_3:text
        })
        break;
      }
      default:
        break
    }
  },

更新文字：

getText(index){
    switch(index){
      case 0:{
        return "很差"
        break
      }
      case 1:{
        return "一般"
        break
      }
      case 2:{
        return "满意"
        break
      }
      case 3:{
        return "非常满意"
        break
      }
      case 4:{
        return "无可挑剔"
        break
      }
      default:{
        return "无可挑剔"
        break
      }
    }
  }

代码较长，但很多都是重复的东西，理清思路之后就比较简单了。