评分效果是一个很常见的功能，比如豆瓣评分中经常出现的五星评分。今天就给大家一个类似的评分效果。写在前面，做医院小程序的时候，一个功能就是评估医院，查资料结合自己的知识花了一个下午才解决。(由于缺乏知识，中间的问题耽误了几个小时，这是下面显示的第二个问题)。效果预览分别截取没有评级状态和评估状态的页面：不勾选所选代码。1.feedback.js//pages/more/feedback . js page({/* * *第*页的初始数据/data3360 {//评估图片评估imgull : ' 3359s1.ax1x.com/2018/08/05/pdm8bj.png', stareckeddimgurl 3360 ' 3359s1.ax1x.com/2018/08/05/pdq0it.png' starunchekeddmgurl : ' 3359s1.ax1x.com/2018/08/05/pdQDII.png',//Suggestions意见3360 ' '，星图3360 ['非常差'，'差'，'尚可'，'良好'，'评估3:[{ ID :名称3: '医院环境'，图像3: ' https://s1.ax1x.com/2018/08/05/pdmacv.png',之星3:让评估=this . data . evaluations；让评价=评价[指数]；//console . log(evaluation)evaluation . star=star；evaluation . note=this . data . star map[star-1]；this . setdata({ evaluation s : evaluations })} })2、feedback.wxml！-pages/more/feedback . wxml-view class=' container ' view class=' card '！-为了便于数据定位，Wx:for-item被自定义为I-blockwx 3360 for=' { { evaluations } } ' wx : for-item=' I ' wx : key=' ' view class=' card-item ' view class=' item-title ' view class=' image-container title-image ' image src=' { { I . image } } '/image/view view view class=' title-text ' { I . name } }/view/view view view view class=' item-content-为了便于数据定位，Wx:for-item被自定义为j-blockwx 3360 FOr=' { { Starmap } } ' wx 3360 FOr-item=' j ' wx 3360 key=' ' view class=' image-container ' data-index=' { { I . id } } ' bind tap=' chooseStar ' image wx 3360 if=' { { I . star=index 1 } } ' data-star=' { { index { 1 } } ' src=' { { Stratexecdimitem }和解决方案1。图像图片中没有点击事件。向图像图片添加外部容器，然后向该容器添加单击事件。2.三个评价内容是通过列表渲染实现的，每个评价内容中的五星图片也是通过列表渲染实现的，所以存在嵌套循环。在这一点上，你如何确切地知道你订购了哪个评估项目的哪个星？默认情况下，的当前元素变量名都是item，因此在内部循环中item的使用指向内部数组，而在外部循环中找不到内容。所以我把两层数组当前元素的变量名重新命名(分别命名为I和J)，这样外层数组的数据项也可以在内层使用i.*来访问。3.如何动态显示星级？嵌套wx:if或隐藏在wx:for中即可达到效果。当星下标1小于或等于当前星级时，显示为选中星；当星级下标1大于当前星级时，将显示为所选星级。当点击一颗星时，将相应项目的星级改为被点击星的下标1。