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