微信小程序实现五星评价

2024-09-28 10:17:04

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

首先准备两张图片，在阿里巴巴矢量图标库中随便下两个颜色不一样的星星

效果如下

wxml

循环五次图片，添加点击事件

<view class="card_start flex">
    <span style="font-size: 28rpx;">服务评价</span>
       <image class="imagecls" wx:for="{{5}}" wx:key="index" data-name="technicianAssessStar" data-item="{{item}}"
    src="{{item-technicianAssessStar+1>0?'/image/self_img/start-noColor.png':'/image/self_img/start-color.png'}}"
    bindtap="start_technician"></image>
    <span class="ft-size-28 titleRight">{{technician_content}}</span>
</view>

默认五颗星（超赞）

data:{
    technicianAssessStar: 5, // 服务技师评价，默认五颗星
    technician_content:'超赞',
}
// 服务评价 技师
  start_technician: function (e) {
    var technicianAssessStar = e.currentTarget.dataset.item + 1;
    var variable = e.currentTarget.dataset.name;
    console.log(technicianAssessStar, e)
    console.log(variable)
    if (variable === "technicianAssessStar")
      if (technicianAssessStar === 1) {
        this.setData({
          technician_content: '很差',
        })
      } else if (technicianAssessStar === 2) {
      this.setData({
        technician_content: '差',
      })
    } else if (technicianAssessStar === 3) {
      this.setData({
        technician_content: '一般',
      })
    } else if (technicianAssessStar === 4) {
      this.setData({
        technician_content: '赞',
      })
    } else if (technicianAssessStar === 5) {
      this.setData({
        technician_content: '超赞',
      })
    }
    this.setData({
      technicianAssessStar: technicianAssessStar,
    })
  },

打印的数据

wxss

.flex {
  display: flex;
}
.card_start {
  margin-top: 32rpx;
}
.imagecls {
  height: 45rpx;
  width: 45rpx;
  padding: 0 20rpx;
}
.ft-size-28 {
  font-size: 28rpx;
}
.titleRight {
  color: rgba(0, 0, 0, 0.25)
}

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

微信小程序如何实现五星评价功能

这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果要实现的效果:点击到第几颗星,就要显示到第几颗星,<br data-filtered="filtered">///////////////// 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt&quo
微信小程序实现星级评价效果

本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下效果预览: wxml代码部分: <view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='http://img02.tooopen.com/images/20150928/tooope
微信小程序实现星级评价

本文实例为大家分享了微信小程序星级评价的具体代码,供大家参考,具体内容如下效果图 wxml <view class='assess-star'> <view class='star-wrap'> <view class='star-item' wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.lightImg:item.blackI
微信小程序实现星星评价效果

本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现 wxml文件  <view class='container'> <view class='evaluate_contant'>  <block wx:for='{{evaluate_contant}}' wx:key='' wx:f
微信小程序五星评价功能的实现

微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico
微信小程序实现的五星评价功能示例

本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite
微信小程序实现五星评价功能

本文实例为大家分享了微信小程序实现五星评价的具体代码,供大家参考,具体内容如下需求如图: 1个星-很不满意: 2个星-不满意: 3个星-一般: 4个星-还不错: 5个星-很满意: 找了demo,删删改改,demo地址:微信小程序实现星星评价效果需要的页面引入: json: { "usingComponents": { "star": "../../components/star/star" },
微信小程序实现五星评价

本文实例为大家分享了微信小程序实现五星评价的具体代码,供大家参考,具体内容如下首先准备两张图片,在阿里巴巴矢量图标库中随便下两个颜色不一样的星星效果如下 wxml 循环五次图片,添加点击事件 <view class="card_start flex"> <span style="font-size: 28rpx;">服务评价</span> <image class="imagecls&qu
微信小程序五星评分(包括半颗星评分)实例代码

微信小程序五星评分一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml  <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-
微信小程序五星评分的实现实例

微信小程序五星评分五星级评分效果: <view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class=&qu

微信小程序实现五星评价

相关推荐

随机推荐