如何实现小程序评价功能，方法及代码是什么

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

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

先是效果图

代码

wxml文件

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

<view class="view_page">
 <view class="content_cls">
  <view class="cross_column" style="margin-top: 50rpx;">
   <label>总体评价：</label>
   <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="total" data-item="{{item}}" src="{{item-total+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
  </view>
  <view class="cross_column">
   <label>服务态度：</label>
   <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="service" data-item="{{item}}" src="{{item-service+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
  </view>
  <view class="cross_column">
   <label>施工质量：</label>
   <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="quality" data-item="{{item}}" src="{{item-quality+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
  </view>
  <view class="cross_column">
   <label>维修时间：</label>
  <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="repairtime" data-item="{{item}}" src="{{item-repairtime+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
  </view>
  <view class="cross_column" style="height:120rpx;margin-top:200rpx;margin-button:10rpx">
   <button bindtap="Reasons_bind" class="but_style">需要返修</button>
   <button class="but_style">确认评价</button>
  </view>
 </view>
</view>

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,
   })
  }
 },