微信小程序利用wxs做星星评分

数据结构(注意这是根据真实数据来写的，自己用的时候需要注意)

　　questionList:[

　　　　　{

　　　　　　maxScore:5,//最大星星数量

　　　　　　userAnswer:'',//回显是的分数也可以用来储存点击时的分数

　　　　　}

　　　　]

　　answerList  这个数后台需要的分数集合可以忽略

wxml部分

　　　　<wxs module="score">

  　　　　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

　　</wxs>

 　　<view class="stars clearfix">

            <view wx:for="{{item.maxScore}}" wx:for-index="idx" wx:key="idx"  wx:for-item="itemImg" class="stars-list {{score.getScoreType(idx, answerList[index])}}">

              <view class="stars-view" data-score="{{(idx+1)*2-1}}" data-index="{{index}}" bindtap="{{finish||evaFinish ? '' : 'starClick'}}"></view>

              <view class="stars-view" data-score="{{(idx+1)*2}}" data-index="{{index}}" bindtap="{{finish || evaFinish ? '' : 'starClick'}}"></view>

            </view> 

          </view>

 

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;

}