这篇文章主要介绍了如何实现小程序评价功能，方法及代码是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何实现小程序评价功能，方法及代码是什么文章都会有所收获，下面我们一起来看看吧。

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

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

先是效果图

代码

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

到此这篇关于“如何实现小程序评价功能，方法及代码是什么”的文章就介绍到这了,更多相关如何实现小程序评价功能，方法及代码是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS实现反转数组的方法有什么，区别在哪

  反转方法：1、利用for循环和push()，语法“var nar=[];for(var i=arr.length-1;i>=0;i--){nar.push(arr[i])}”；2、利用reverse()，语法“arr.reverse()”。

• vue中setup函数的用法是什么？要注意哪些？

  这篇文章主要介绍vue中setup函数的使用，对于setup函数的特性和、作用和需要注意的点本文都有详细的介绍，另外还分享了setup函数使用的两种方法的实例，感兴趣的朋友可以参考，接下来我们一起了解看看吧。

• Angular样式隔离怎样实现？一文带你看懂

  Angular样式隔离怎样实现？对于Angular是怎么进行样式隔离的，有一些新手不是很了解。这篇就主要给大家介绍一下Angular样式隔离机制实现，对大家学习或工作有帮助，感兴趣的朋友就继续往下看吧。

• js数据类型有哪一些？怎么判断数据类型？

  js数据类型有哪些？如何判断数据类型。首先，我们需要知道js数据类型分为两种：基本数据类型和引用数据类型。基本数据类型就是简单的数据段，是按值访问的；而引用数据类型是保存早内容中的对象，是按引用访问的。

• Node.js中HTTP模块的用法的相关知识有什么

  这篇文章主要介绍了Node.js之http模块的用法，对Node.js感兴趣的同学，可以参考下