微信小程序实现评价功能

 更新时间:2022年08月28日 11:36:00   作者:北方的木  
这篇文章主要为大家详细介绍了微信小程序实现评价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

先是效果图

代码

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

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

相关文章

  • JavaScript深入介绍WebAPI的用法

    JavaScript深入介绍WebAPI的用法

    JS分成三个大的部分:ECMAScript、DOM API、BOM API,其中:ECMAScript是让前端开发建立基本的编程思维。但是要想真正来写一个更加复杂的有交互式的页面,还需要WebAPI的支持,相当于把后端编程实现成前端交互。DOM+BOM就组成了WebAPI
    2022-06-06
  • javascript实现当前页导航激活的方法

    javascript实现当前页导航激活的方法

    这篇文章主要介绍了javascript实现当前页导航激活的方法,涉及javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JSON基本语法及与JavaScript的异同实例分析

    JSON基本语法及与JavaScript的异同实例分析

    这篇文章主要介绍了JSON基本语法及与JavaScript的异同,结合实例形式分析了json简单值、对象、数组三种类型值使用技巧,需要的朋友可以参考下
    2019-01-01
  • 解决远程页面抓取中的乱码问题?

    解决远程页面抓取中的乱码问题?

    解决远程页面抓取中的乱码问题?...
    2007-03-03
  • 前台js改变Session的值(用ajax实现)

    前台js改变Session的值(用ajax实现)

    前台js改变Session的值,有很多的新手朋友对此问题会很陌生,本文将提供解决方法,需要了解的朋友可以参考下
    2012-12-12
  • Javascript中的async awai的用法

    Javascript中的async awai的用法

    本篇文章主要介绍了Javascript中的async/awai的用法,将分享async / await是如何工作的,有兴趣的可以了解一下
    2017-05-05
  • 解决webpack打包速度慢的解决办法汇总

    解决webpack打包速度慢的解决办法汇总

    本篇文章主要介绍了彻底解决webpack打包慢的解决办法汇总,详细的介绍了3种方法,有兴趣的可以了解一下
    2017-07-07
  • tree shaking功能及使用原理详细解析

    tree shaking功能及使用原理详细解析

    这篇文章主要为大家介绍了tree shaking功能及使用原理详细解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪的相关资料
    2023-01-01
  • JavaScript生成图形验证码

    JavaScript生成图形验证码

    这篇文章主要为大家详细介绍了JavaScript生成图形验证码的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 纯JS前端实现分页代码

    纯JS前端实现分页代码

    这篇文章主要介绍了纯JS前端实现分页代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论