小程序制作笔记-五星评分实现

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