小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)五星評(píng)分效果

發(fā)布時(shí)間:2021-06-11 08:35 所屬欄目:小程序開發(fā)教程
打分評(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。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26427.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢