因为Sham最近在制作宿舍服务小程序,里面涉及到报修模块,住宿员工报修后,物业维修,维修完成后报修人进行评估打分,这样就用到打分功能,这里了Sham用的是比较简单的5星评分,代码也很简单,如下:
Js页面
1 2 3 4 5 6 7 8 9 10 11 |
Page({ data: { starno:"", }, //点击事件,将startno赋值为当前目标的id值,并在wxml前端更新 setstar:function(e){ this.setData({ starno: e.currentTarget.id, }) }, }) |
Wxml页面
1 2 3 4 5 6 7 8 |
<view class="icons"> <!--如果startno大于某个数字时,显示y5star.png黄五角星,否则显示w5star.png白五角星--> <image class="stars" src="{{starno>0 ? '../images/y5star.png' : '../images/w5star.png'}}" id="1" bindtap="setstar"></image> <image class="stars" src="{{starno>1 ? '../images/y5star.png' : '../images/w5star.png'}}" id="2" bindtap="setstar"></image> <image class="stars" src="{{starno>2 ? '../images/y5star.png' : '../images/w5star.png'}}" id="3" bindtap="setstar"></image> <image class="stars" src="{{starno>3 ? '../images/y5star.png' : '../images/w5star.png'}}" id="4" bindtap="setstar"></image> <image class="stars" src="{{starno>4 ? '../images/y5star.png' : '../images/w5star.png'}}" id="5" bindtap="setstar"></image> </view> |
Wxss页面
1 2 3 4 5 6 7 8 9 10 |
.icons{ flex-direction: row; display: flex; padding:5px; margin:5px; } .stars{ width:30px; height:30px; } |
然后就是从网上找黄白2个五角星,放到images文件夹里,就可以实现打分功能了。
当然,后面还需要将打分的结果starno值通过表单提交提交到数据库,这样就能在后续查看时调用出来了
最新评论