打分評(píng)分效果是很常用的功能，比如豆瓣評(píng)分里面經(jīng)常出現(xiàn)的五星評(píng)分等，今天就給大家做一個(gè)類似的評(píng)分效果。

寫在前面

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

效果預(yù)覽

分別截取了無評(píng)分狀態(tài)和評(píng)價(jià)狀態(tài)的頁面：

 
未選中

 
選中

代碼實(shí)現(xiàn)

1、feedback.js

1. // pages/more/feedback.js
2. Page({
3.  
4.   /**
5.    * 頁面的初始數(shù)據(jù)
6.    */
7.   data: {
8.     // 評(píng)價(jià)圖片
9.     evaluationImgUrl: "https://s1.ax1x.com/2018/08/05/PDM8Bj.png",
10.     starCheckedImgUrl: "https://s1.ax1x.com/2018/08/05/PDQ0it.png",
11.     starUnCheckedImgUrl: "https://s1.ax1x.com/2018/08/05/PDQdII.png",
12.  
13.     // 建議內(nèi)容
14.     opinion: "",
15.  
16.     starMap: [
17.       '非常差',
18.       '差',
19.       '一般',
20.       '好',
21.       '非常好',
22.     ],
23.  
24.     evaluations: [
25.       {
26.         id: 0,
27.         name: "醫(yī)院環(huán)境",
28.         image: "https://s1.ax1x.com/2018/08/05/PDMaCV.png",
29.         star: 0,
30.         note: ""
31.       },
32.       {
33.         id: 1,
34.         name: "醫(yī)生專業(yè)技術(shù)",
35.         image: "https://s1.ax1x.com/2018/08/05/PDMd3T.png",
36.         star: 0,
37.         note: ""
38.       },
39.       {
40.         id: 2,
41.         name: "醫(yī)生態(tài)度",
42.         image: "https://s1.ax1x.com/2018/08/05/PDMN40.png",
43.         star: 0,
44.         note: ""
45.       }
46.     ]
47.   },
48.  
49.   /**
50.    * 評(píng)分
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.     <!-- 為方便數(shù)據(jù)定位，自定義了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.             <!-- 為方便數(shù)據(jù)定位，自定義了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>

只貼出關(guān)鍵代碼，不附樣式代碼。

問題及解決方案

1、image圖片沒有點(diǎn)擊事件。

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

2、三個(gè)評(píng)價(jià)內(nèi)容是通過列表渲染實(shí)現(xiàn)的，而每個(gè)評(píng)價(jià)內(nèi)容中的五個(gè)星星圖片也是通過列表渲染實(shí)現(xiàn)的，這樣就存在一個(gè)嵌套循環(huán)。此時(shí)，如何清楚地知道到底點(diǎn)了哪一個(gè)評(píng)價(jià)項(xiàng)的第幾顆星？

默認(rèn)的當(dāng)前元素變量名都是item，這樣的話，在里層循環(huán)里使用item指向的是里層的數(shù)組，而無法找到外層循環(huán)里的內(nèi)容。于是我對(duì)兩層數(shù)組當(dāng)前元素的變量名進(jìn)行重命名（分別命名為 i 和 j ），這樣在里層使用i.*也可以訪問到外層數(shù)組的數(shù)據(jù)項(xiàng)。

3、如何動(dòng)態(tài)顯示星級(jí)？

在wx:for里面嵌套wx:if或者h(yuǎn)idden都可以實(shí)現(xiàn)效果。當(dāng)星星下標(biāo)+1小于或者等于當(dāng)前星級(jí)的時(shí)候，就顯示為被選中的星星；當(dāng)星星下標(biāo)+1大于當(dāng)前星級(jí)的時(shí)候，就顯示為被選中的星星。當(dāng)星星被點(diǎn)中時(shí)，就將相應(yīng)項(xiàng)的星級(jí)改為被點(diǎn)擊的星星的下標(biāo)+1。