首页

源码搜藏网

首页 > 微信小程序 > 微信小程序开发教程 >

微信小程序实现类似豆瓣评分等的打分评分效果

创建时间：2018-08-09 16:32  浏览次

打分评分效果是很常用的功能，比如豆瓣评分里面经常出现的五星评分等，今天就给大家做一个类似的评分效果。

写在前面

在制作一个医院类小程序的前端时，有一个功能是对医院进行评价，通过查找资料并结合自身的知识花了一个下午终于解决了。（由于知识欠缺的原因，中间一个问题阻碍了几个小时，即为下文所陈列问题的第二条）。

效果预览

分别截取了无评分状态和评价状态的页面：

微信小程序实现类似豆瓣评分等的打分评分效果 
未选中

微信小程序实现类似豆瓣评分等的打分评分效果 

20180805172926432.png (21.93 KB, 下载次数: 0)

下载附件  保存到相册

3 天前 上传

 

选中
问题及解决方案

1、image图片没有点击事件。

给image图片加上一层外部容器，然后在这一层容器加上点击事件。

2、三个评价内容是通过列表渲染实现的，而每个评价内容中的五个星星图片也是通过列表渲染实现的，这样就存在一个嵌套循环。此时，如何清楚地知道到底点了哪一个评价项的第几颗星？

默认的当前元素变量名都是item，这样的话，在里层循环里使用item指向的是里层的数组，而无法找到外层循环里的内容。于是我对两层数组当前元素的变量名进行重命名（分别命名为 i 和 j ），这样在里层使用i.*也可以访问到外层数组的数据项。

3、如何动态显示星级？

在wx:for里面嵌套wx:if或者hidden都可以实现效果。当星星下标+1小于或者等于当前星级的时候，就显示为被选中的星星；当星星下标+1大于当前星级的时候，就显示为被选中的星星。当星星被点中时，就将相应项的星级改为被点击的星星的下标+1。
代码实现

1、feedback.js
  1. // pages/more/feedback.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     // 评价图片
  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.     // 建议内容
  14.     opinion: "",
  15.  
  16.     starMap: [
  17.       '非常差',
  18.       '差',
  19.       '一般',
  20.       '好',
  21.       '非常好',
  22.     ],
  23.  
  24.     evaluations: [
  25.       {
  26.         id: 0,
  27.         name: "医院环境",
  28.         image: "https://s1.ax1x.com/2018/08/05/PDMaCV.png",
  29.         star: 0,
  30.         note: ""
  31.       },
  32.       {
  33.         id: 1,
  34.         name: "医生专业技术",
  35.         image: "https://s1.ax1x.com/2018/08/05/PDMd3T.png",
  36.         star: 0,
  37.         note: ""
  38.       },
  39.       {
  40.         id: 2,
  41.         name: "医生态度",
  42.         image: "https://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. 1
  2. 2
/ 2