微信小程序实现评价功能

本文实例为大家分享了微信小程序实现评价的具体代码，供大家参考，具体内容如下

首先去图标库，找一个空心星图片和一个实星图片

先是效果图

代码

wxml文件

for循环5次，初始值是5星，data-name用于区别是那个评价的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
条件判断，图片判断一个是空星，一个实星，根据自己图片地址改变

  
    
      总体评价：
      
    
    
      服务态度：
      
    
    
      施工质量：
      
    
    
      维修时间：
     
    
    
      需要返修
      确认评价
    
  

css样式

如果需要实现我这种效果可以使用

/* pages/browse/evaluatepage.wxss */
/* 列合并 */
.cross_column {
  display: flex;
  height: 70rpx;
  line-height: 70rpx;
}

/* img图片样式 */
.imagecls {
  width: 70rpx;
  height: 70rpx;
}
/*按钮样式 */

.but_style {
 background-color: #f2a8b9;
  width: 200rpx;
  height: 100rpx;
  color: white;
}
/*报修评价内容样式 */

.content_cls {
  width: 70%;
  margin-left: 15%;
  background-color: white;
}
.content_cls view{
  margin-bottom: 50rpx;
}

最后就是js

先是初始化评价都为5星
点击星星触发事件，获取item和name.根据name判断赋值
本来打算一个setData实现的，但是没整出来，有整出来的朋友可以附下代码

data: {
    total: 5,//总体评价
    service: 5,//服务态度
    quality: 5,//施工质量
    repairtime: 5//维修时间
  },
  img_bind: function(event) {
    var id = event.currentTarget.dataset.item + 1;
    var variable = event.currentTarget.dataset.name;
    console.log(id)
    console.log(variable)
    if (variable == "total")
    this.setData({
      total: id,
    })
    else if (variable == "service")
      this.setData({
        service: id,
      })
    else if (variable == "quality")
      this.setData({
        quality: id,
      })
    else
    {
      this.setData({
        repairtime: id,
      })
    }
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。