目前服务类的小程序中服务评价似乎是一项不可获取的功能,一般为五颗星星,点击对应星星就是点亮之前的星星,达到打分的目的,此文就简单叙述下我实现该功能的思路:
在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
}
}
}
代码较长,但很多都是重复的东西,理清思路之后就比较简单了。