[微信小程序]星级评分和展示(详细注释附效果图)

星级评分分成两种情况: 一:展示后台给的评分数据   二:用户点击第几颗星星就显示为几星评分;

[html]  view plain  copy

1. <!--pages/test/test.wxml-->  
2. <view>  
3. <view>一:显示后台给的评分</view>  
4. <block wx:for="{{one_1}}">  
5. <image src='../../images/use_sc2.png'></image>  
6. </block>  
7. <block wx:for="{{two_1}}">  
8. <image src='../../images/use_sc.png'></image>  
9. </block>  
10. </view>  
11. <view>这里num给的是几分就显示几颗星星</view>  
12.   
13. <view style='margin-top:60px;'>二:显示用户选择的评分</view>  
14. <block wx:for="{{one_2}}" wx:key="index">  
15. <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../images/use_sc2.png'></image>  
16. </block>  
17. <block wx:for="{{two_2}}" wx:key="index">  
18. <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../images/use_sc.png'></image>  
19. </block>  
20. <view>{{one_2}}星</view>  

[javascript]  view plain  copy

1. // pages/test/test.js  
2. Page({  
3.   /** 
4.    * 统一满分为5星 
5.    */  
6.   data: {  
7.     num: 4,//后端给的分数,显示相应的星星  
8.     one_1: '',  
9.     two_1: '',  
10.     one_2: 0,  
11.     two_2: 5  
12.   },  
13.   onLoad: function (options) {  
14.     //情况一:展示后台给的评分  
15.         this.setData({  
16.           one_1: this.data.num,  
17.           two_1: 5 - this.data.num  
18.         })  
19.   },  
20.   
21.   //情况二:用户给评分  
22.   in_xin:function(e){  
23.     var in_xin = e.currentTarget.dataset.in;  
24.     var one_2;  
25.     if (in_xin === 'use_sc2'){  
26.       one_2 = Number(e.currentTarget.id);  
27.     } else {  
28.       one_2 = Number(e.currentTarget.id) + this.data.one_2;  
29.     }  
30.     this.setData({  
31.       one_2: one_2,  
32.       two_2: 5 - one_2  
33.     })  
34.   }  
35. })  

[css]  view plain  copy

1. /* pages/test/test.wxss */  
2. image{  
3.   height: 60rpx;  
4.   width: 60rpx;  
5.   display: inline-block  
6. }  

本篇文章为转载文章，经过博主允许，原文链接：https://blog.youkuaiyun.com/qq_35713752/article/details/78770260