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

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

在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
      }
    }
  }

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

猜你喜欢

转载自blog.csdn.net/zjgo007/article/details/106159058
今日推荐