数据结构(注意这是根据真实数据来写的，自己用的时候需要注意)
questionList:[
maxScore:5,//最大星星数量
userAnswer:'',//回显是的分数也可以用来储存点击时的分数
answerList 这个数后台需要的分数集合可以忽略
wxml部分
var getScoreType = function(ind, score){//第一个参数为当前列第几个星星，第二个参数为当前列的分数
if(score){
var startFullIndex = score/2
if(ind+1 <= startFullIndex){
return 'full'
}else if(ind+1 > startFullIndex && ind+1 < startFullIndex+1){
return 'half'
}else{
return 'null'
}
}else{
return 'null'
}
}
module.exports.getScoreType = getScoreType
js部分
监听数据 (放置data下面即可)
observers:{ //questionList需要注意这个要换成自己的需要监听的变量
'questionList':function(val){
if(val.length> 0){
val.map(v => {
if(this.data.finish||this.data.evaFinish){//此处是判断回显
this.data.answerList.push(v.userAnswer)
}else{
this.data.answerList.push('')
}
})
this.setData({
answerList:this.data.answerList
})
}
}
},
methods：{
starClick:function(e){
// 点击星星
let {index, score} = e.currentTarget.dataset;//获取wxml上面绑定的分数和题的下标
this.data.answerList[index] = score
this.setData({
answerList: this.data.answerList
})
},
}
wxss部分
如果样式展示有问题，那么就自己微调下吧
.stars{
display: flex;
flex-direction:row;
}
.stars .stars-list{
display: flex;
flex-direction:row;
width: 40rpx;
padding-right: 10rpx;
padding-left: 10rpx;
height: 40rpx;
position: relative;
}
.stars-view{
width: 30rpx;
background: transparent;
color: rgba(255, 255, 255, 0);
position: absolute;
top: 0;
left: 0;
height: 40rpx;
}
.stars-view:nth-of-type(even){
width: 30rpx;
background: transparent;
color: rgba(255, 255, 255, 0);
position: absolute;
top: 0;
left: 30rpx;
height: 40rpx;
}
.list .stars .null {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCBJREFUWEfVmF1oHFUUx89/ZpNsIyLVh0rN9947W61tBcGASkEpfqIvolXoi+CDttQXIVhFBKHQvOiDtX3qiz7Ujz6JFJVGkFKQgBBqUXfu3d1GanwQW/yqMbt7/zKpG5J0szM7u2vNPC075/zPb86cc++5A1knF9YJp3QMlKQXWnsQIk9GD0+RjwKlXgXgOpGMjoEWTPGw0O1bDuUBh7VW+/83oKVSaXu15mZIrnhwAMz43h1jY2Nn24XtSEZDY06Q8kQjGEBOBFovlkM7V9ug1trbHeXs6mzWoaKsepDtSqlz1xS0YOwHQj7VFAL4MK/V7msGaszsbZTKN1HHN4OIOh/Ss03r4W/Twrb16sPQHqfw6STBIXg/CNQzSWwb1npax/D8+VulUj0Xl81ltep6Mv7W0dHR79PETJVRkhlji5+QfLCloMCngco9BqDakp9I850p6uTwwoXN3vy8JhCIE02IFpFxIW9uNdgVe/wkkGlQjHhiQIYumzXBwMBctEKspbkio7Ozsxv/rlSeE/IuEgEgimR/OqDWvABcJsUCDAWY3tDXd2xwcPDiUunUf5TL5S0Lleq0iFzfWoiuWf/hoXe8vlIsZTQMzZcU2dm1sGmEgTN5re5dLJi6f2jsZZIb0uh1ywfAX4FWi6W3BFow9gsh7+tW0HS6mMoHatcK0GKxuK3mOE0ym060s14A5jO+N16fvFZ0vbX2/prjxyJyXWfDtqYWrQC+h8dzudzUVV1f/8Nae7ejnCR5Q2vyHbP+XTL+o/mxsdPLFRvuTNbaO2uOn4nITR0Ln0AIwK8Q/yGtR79abb7mFvrvnHmK5KYEMTphctH38IBS6utGYk33+mKxGNScmyJloBMka2kA8nPG93c1O7LEDiXlcnlkoVI9IyKbuwILXEJP5p5gZOS7ZvqxoJFzGNoJCie7AyqH8lofiNNOBFow5hWhHIwTS3Uf3pt5nXspzjcRaCuTfFzAq7oZ8nmgdexcmwzU2GiS39oqREL7uXygb4mzjQUl2Rsa+6eIZOLE0t7P9vXeODw8fKmtZiqUSjukWptJC5HIL+PvXL0TJV7w64bGlPY41t5LFDClkQdvr9a5o21lNLR2ko4TKRkSuQFyNNB6b1ugBWNPCvlwkoiA/AbBu04ACPckHWwgOB0EqunpIraZQmNDktHJc80rmsSF8k5/f/bQwMDAL5FhdFCcX1iYEEr02bHp2AiRH4NAN92m40FDM0ORHWtQViE4ls32vjE0NDTXyKZUKm2qOndAyOdJ6Wusg0I+UFvaevXGFF9wdEeWi1w5f/O4B7yulLJJysJaO0jKa458dvVSBw8vBkq93RZo5GyM2eeI/YBsFOGpjO9Ppv04a8wPOScLLwv5SDTJQ3BE69xbcQ8b++rjBP6r++sG9B+In4048f4OLwAAAABJRU5ErkJggg==)
no-repeat center center;
background-size: contain;
}
.list .stars .full {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABCxJREFUWEfVmFtoHFUcxr9vdmZaKyJV2E0TI4Im1Ma2omBApVgpXtEX8QZ9EXywqakmswSriEUoNLDTrbUmT33Rh2rtk4ioNF4oBQkooYaqSZ96SbJbbPGW1p3Z+WQTUrO57MzObqyZp2XP9/9/v/M/Z85liGXycJlwom6g0i7Dz/bvVqCnS52nwY/Nrm1vkLuCehSjbqC+mzwQCNtnQxnkAdPJdf5vQLUvucEvYkgqHyESMhO4k6/mT9QKW5eKem7yiISnFoIhcMRK56emQy1PzaB6J3WH7+vE3GrOQE1V1eQGvpIbvqqghUzqI0DPVIbgYTude/aqgWp/wzq/EPwowKgEQSAwbWM9d0ycjAtb09AXMqlDgJ6LZs4P7XTu+Wja+arYoMquud0vFofDqnllrpaqCrON6bGf48DGAtXXD5j+Dyc/lfBwNaYkPjfvWvcEN3/jVxM3tYFUCpBEZJsbffotKqqVVAvAFkjtAhqqNZsyJMYBDgIalTjKBEdMmaPoOjNGUovlLANV382r/cuFFxEE9whsJXGbpFVxgKqNITkp4RShERjGoAnzILvPXpg1daZ/KtO41oc/KOC6ak2WQk/iT9My2mdWiisV9TLJbwVsWgrTuDlJHLec/P1lc9RzU5OSrombdCniSF6ynNzU1Pu3om7qK0mbl8Iwbk6SA5aT21IGqr2p9X6AQUEr4yauZxzBy6ap9pmTV9lb72VTD6KITwRdW0/TanOVVgAAT1pObmDeWz/zh+c23gv5nwm4vlqDeugJ/AEj8bjVPX5sdr4FF/xCZs3dRPCFoBvrYR41B4HfRD5iO7nv5sYsujNNnzNxVFIqqlEtOpIXJOMhOz3+/UJ5Km+hblOrL29AwE21QITFkjxvJrSl0pUl9FCibMMtfjE4LqAxzDBOO4GLZiJxH7vGf6oUHwpaCvYyDT1C0BsHJCyGBvdY3bmdobowwTRo6nVBu6Noq9WQxl7LmXDC4iJVtLqTfJhleTuJLy0nH3qujQbqpoYhtVWHEE1NYMxK55vC1KGgOtxm+6fP/yXADEsWt91atfIGdpy+WNPLJLdpoydvKC5ElDgaiU1zd6LIC/6M0HeTWwPhgyiGsTU0Omxnor+minpusldCT2yICIEG0W86+Y7aQDPJ0gHl0Qh+pYvb7wTfB0QJW6MebEgcs5x8xdtF6MtUyCRHALRU7C15CdB75gprD18+92tJO31R/LsHATrDjo0kzllOvuI2HQ7qJocgbFwIlIBP8mDCtt9m55mxhTTal0z5AXdCeEnSikU6/Iudzq+taegLbsM2KOibnaT0hU7gIYvWW+w+eyrKtJDb2Oyh+CalF+Yvddxhp3Pv1gRaCi64DduhoJPgahFHrYR6436c1f7mWz2v8Bqlx0RMguyzu3PZsM6GDn1Ygv+qfdmA/gPHiYc4lxrdSwAAAABJRU5ErkJggg==)
no-repeat center center;
background-size: contain;
}
.list .stars .half {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAoCAYAAACIC2hQAAAAAXNSR0IArs4c6QAABFdJREFUWEfVmF1oHFUYht9vZjdJFZEo7G7zY352zmw1thUEAypFpfiL6YW0KvRG8EJbI6IQrCKKUGhgp+tPTa56oxfV2isRUWkUKREJWEINVZMYTbURLLb414bZ2XllEqcmm92d3ZmkTfZqd+fM+z3nPd/5zjcjWCMfWSOcWDZQ8hXNyQ3upcvtP20bBoH3TcN4UUTc5TBj2UAdK3HAJXZ7UD/2DM+xaSIHlDJ6Vw0oX0tscgoYJedXyAcVEcZ07abOzs4TUWGXxdG8lThC4iEfxgf1fovgiKnU9ssOyteTNzoOT/huLnR0HlSoCTYZhjEWBTayo3Y2+R7AHQshFjo697/I4YwyHr5soHwjdYNju98Q0CqBejtfEN+oVNvJsLCRHLWzyUMAHykOvsRRz1TIu6ZpPHrJQZlbf71TKIwVu1mcoz6Y52o8pnd1dHR8FwY2lKP8/I6Yc/zkhyTuKRW0lKP/5erHppF+UEScWmErgpIU5FqbHHEUCzRFqABRILsJpMoFKws6T/srBCNCTEDDhJDjbkPDhNnSMuNViHKai0A5cF2jM2s/Dte9hRBTBAbJK2qdfWXQ0moicp7EpAjHITKyrr7+YGtr69mLqeN/YbZpgwNnhMBVtYJVs5lCaP6tSV23XykuOprPJr4gsCWE4JJbwjhaMq7IcEYZt88ljD8gbyXPk1y3mkBF5IKpjLnUWwj6Gck7VxMoIEMZ09i6CJT7kxsdFyMEG6LCLsfSi8hsTNe6/c5r0a7P55J3oYAPCF4ZBTYqqFcBdE160un00JJd/3+uNt0KOh8RuDosbETQvxDTH8h0dh5bGL9kwbez628WuJ8QvDYMbFhQEflDoN+rVMdXxXHLnkzzfSaOkkzWChsS9Kyuyd2GYXxdKl7lI9RqNh3mhwi01AJbK6gIzsR0fWulR5bApoS5VLtTcIcJNFULWxOoyDmJx24z29u/raQfCOrdnM+m+gi3f2VAsS+j1J4g7SpBky8Q3Bsk5l+vzVFtf0alnwvSrgq0XCdfTrwWUBF8aipVsq8NLE/FALaVHAPZFTTrUI4CMxlTNQdpBzrKw111zqkz/xCIBYmFBEVDfd01bW1t5yJtJlrNm/PMj1YL6Y2rZenndGP6luKTqOqC7w90rMROl3hnJUE10XYplR6M5GjeSvST6FtJUBEMmkrtigaaTXgNyn3VgIrgT4G8/UPPlyLgTpJVNTYCOWaaRsWni8DNZGcT4wBUxdmKXAD4Vqw+vk+eOv27N3Z6erpx1rb7QHivHSu2jQKcNk1V8ZgOBrUSoyA2l2kUHBE5qNfVvSq9P8+UGjM1NZV0XHcPyCdI1JeesHyfMY0NkZbetlJPgu7AouIr8F7eHYpL/GV59pfJatJicnKylcRLLvmYt88X6WnytGkYb0YC9W62rdRu0O0VSCMFR+M6++WZ30K9nJ2YOJV2YT8P8n6vkxfIgFLpXNBkA5c+SOBSXV8zoP8C9wSgOEfVAVMAAAAASUVORK5CYII=)
no-repeat center center;
background-size: contain;
}