Sham@双目瞿因为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值通过表单提交提交到数据库，这样就能在后续查看时调用出来了
最新评论