打分評分效果是很常用的功能，比如豆瓣評分里面經常出現的五星評分等，今天就給大家做一個類似的評分效果。

寫在前面

在制作一個醫院類小程序的前端時，有一個功能是對醫院進行評價，通過查找資料并結合自身的知識花了一個下午終于解決了。（由于知識欠缺的原因，中間一個問題阻礙了幾個小時，即為下文所陳列問題的第二條）。

效果預覽

分別截取了無評分狀態和評價狀態的頁面：

 
未選中

 
選中

代碼實現

1、feedback.js

1. // pages/more/feedback.js
2. Page({
3.  
4.   /**
5.    * 頁面的初始數據
6.    */
7.   data: {
8.     // 評價圖片
9.     evaluationImgUrl: "//s1.ax1x.com/2018/08/05/PDM8Bj.png",
10.     starCheckedImgUrl: "//s1.ax1x.com/2018/08/05/PDQ0it.png",
11.     starUnCheckedImgUrl: "//s1.ax1x.com/2018/08/05/PDQdII.png",
12.  
13.     // 建議內容
14.     opinion: "",
15.  
16.     starMap: [
17.       '非常差',
18.       '差',
19.       '一般',
20.       '好',
21.       '非常好',
22.     ],
23.  
24.     evaluations: [
25.       {
26.         id: 0,
27.         name: "醫院環境",
28.         image: "//s1.ax1x.com/2018/08/05/PDMaCV.png",
29.         star: 0,
30.         note: ""
31.       },
32.       {
33.         id: 1,
34.         name: "醫生專業技術",
35.         image: "//s1.ax1x.com/2018/08/05/PDMd3T.png",
36.         star: 0,
37.         note: ""
38.       },
39.       {
40.         id: 2,
41.         name: "醫生態度",
42.         image: "//s1.ax1x.com/2018/08/05/PDMN40.png",
43.         star: 0,
44.         note: ""
45.       }
46.     ]
47.   },
48.  
49.   /**
50.    * 評分
51.    */
52.   chooseStar: function (e) {
53.     const index = e.currentTarget.dataset.index;
54.     const star = e.target.dataset.star;
55.     let evaluations = this.data.evaluations;
56.     let evaluation = evaluations[index];
57.     // console.log(evaluation)
58.     evaluation.star = star;
59.     evaluation.note = this.data.starMap[star-1];
60.     this.setData({
61.       evaluations: evaluations
62.     })
63.   }
64. })

2、feedback.wxml

1. <!--pages/more/feedback.wxml-->
2. <view class='container'>
3.  
4.   <view class='card'>
5.  
6.     <!-- 為方便數據定位，自定義了wx:for-item為i -->
7.     <block wx:for='{{evaluations}}' wx:for-item='i' wx:key=''>
8.       <view class='card-item'>
9.         <view class='item-title'>
10.           <view class='image-container title-image'>
11.             <image src='{{i.image}}'></image>
12.           </view>
13.           <view class='title-text'>{{i.name}}</view>
14.         </view>
15.         <view class='item-content'>
16.           <view class='image-container content-image'>
17.             <image src='{{evaluationImgUrl}}'></image>
18.           </view>
19.           <view class='contet-text content-body'>
20.             <!-- 為方便數據定位，自定義了wx:for-item為j -->
21.             <block wx:for='{{starMap}}' wx:for-item='j' wx:key=''>
22.               <view class='image-container' data-index='{{i.id}}' bindtap='chooseStar'>
23.                 <image wx:if='{{i.star >= index + 1}}' data-star='{{index + 1}}' src='{{starCheckedImgUrl}}' bin></image>
24.                 <image wx:if='{{i.star < index + 1}}' data-star='{{index + 1}}' src='{{starUnCheckedImgUrl}}'></image>
25.               </view>
26.             </block>
27.             <text class='note'>{{i.note}}</text>
28.           </view>
29.         </view>
30.       </view>
31.     </block>
32.  
33.   </view>
34.  
35.   <view class='submit' bindtap='submit'>提交反饋</view>
36.  
37. </view>

只貼出關鍵代碼，不附樣式代碼。

問題及解決方案

1、image圖片沒有點擊事件。

給image圖片加上一層外部容器，然后在這一層容器加上點擊事件。

2、三個評價內容是通過列表渲染實現的，而每個評價內容中的五個星星圖片也是通過列表渲染實現的，這樣就存在一個嵌套循環。此時，如何清楚地知道到底點了哪一個評價項的第幾顆星？

默認的當前元素變量名都是item，這樣的話，在里層循環里使用item指向的是里層的數組，而無法找到外層循環里的內容。于是我對兩層數組當前元素的變量名進行重命名（分別命名為 i 和 j ），這樣在里層使用i.*也可以訪問到外層數組的數據項。

3、如何動態顯示星級？

在wx:for里面嵌套wx:if或者hidden都可以實現效果。當星星下標+1小于或者等于當前星級的時候，就顯示為被選中的星星；當星星下標+1大于當前星級的時候，就顯示為被選中的星星。當星星被點中時，就將相應項的星級改為被點擊的星星的下標+1。