微信小程序实现星级评分和展示

2025-11-05 23:03:33

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

星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分;

直接上代码

wxml部分

<view>
 <view>一:显示后台给的评分</view>
 <block wx:for="{{one_1}}" wx:key="item">
  <image src='../../image/star.png'></image>
 </block>
 <block wx:for="{{two_1}}" wx:key="item">
  <image src='../../image/starg.png'></image>
 </block>
</view>
<view>这里num给的是几分就显示几颗星星</view>

<view style='margin-top:60px;'>二:显示用户选择的评分</view>
<block wx:for="{{one_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='star' src='../../image/star.png'></image>
</block>
<block wx:for="{{two_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='starg' src='../../image/starg.png'></image>
</block>
<view>{{one_2}}星</view>

wxss部分

image{
 height: 60rpx;
 width: 60rpx;
 display: inline-block
}

js部分

/**
  * 页面的初始数据
  * 满分为5星
  */
 data: {
  num: 4,//后端给的分数，显示的星星
  one_1: '',//点亮的星星数
  two_1: '',//没有点亮的星星数
  one_2: 0,//点亮的星星数
  two_2: 5//没有点亮的星星数
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  //情况一:展示后台给的评分
  this.setData({
   one_1: this.data.num,
   two_1: 5 - this.data.num
  })
 },
 in_xin: function (e) {
  var in_xin = e.currentTarget.dataset.in;
  console.log(e.currentTarget.dataset.in);
  console.log(e.currentTarget);
  var one_2;
  if (in_xin == 'star') {
   one_2 = Number(e.currentTarget.id)
  } else {
   one_2 = Number(e.currentTarget.id) + this.data.one_2
  }
  this.setData({
   one_2: one_2,
   two_2: 5 - one_2
  })
 },

starg是灰色的星星，star是点亮的星星。if判断那里：如果点击的是点亮的星星的话，点亮星星的个数就是点的这个ID。如果点的是灰色星星的话，点亮星星的个数就是点的这个ID加上已点的个数。而ID就是星星的个数。

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

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

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

微信小程序五星评分效果实现代码很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi
微信小程序使用template标签实现五星评分功能

前言微信小程序特点"无须安装,无须卸载,触手可及,用完即走",适合轻量级应用快速开发.小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图: 创建模版 wxml文件: 以<template>为根节点,添加name属性用来区分不同模版: <template name="starsTemplate"> <view class='stars-container'&g
微信小程序实现星级评价效果

本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下效果预览: 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="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite
微信小程序五星评分的实现实例

微信小程序五星评分五星级评分效果: <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
微信小程序五星评分(包括半颗星评分)实例代码

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

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

本文实例为大家分享了微信小程序实现星级评分和展示的具体代码,供大家参考,具体内容如下星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; 直接上代码 wxml部分 <view> <view>一:显示后台给的评分</view> <block wx:for="{{one_1}}" wx:key="item"> <image src='../../image/star.png
微信小程序实现星级评分

本文实例为大家分享了微信小程序实现星级评分的具体代码,供大家参考,具体内容如下第一种方法: WXML代码: <view> 星级评分 </view> <view> <block class="brightStars"> <image data-index='0' data-no="{{item}}" wx:for="{{starsBox}}" bindtap="changePic&q
微信小程序实现笑脸评分功能

本文实例为大家分享了微信小程序实现笑脸评分的具体代码,供大家参考,具体内容如下 image方式实现的笑脸评分功能由于我这里的图片使用的不是背景图,所以实现方法跟使用背景图的方式不同你也可以使用wx:for来操作由于微信小程序需要base64格式或者网图才能设置背景图所以就没用背景图首先这里放的是差中好评的三张图,首先进入页面进行评分时需要默认是好评 1.png表示的是未选中图片 2.png代表的是选中的图片图片点击绑定了同一个函数 <view class='evalua
微信小程序实现星星评分效果

本文实例为大家分享了微信小程序实现星星评分的具体代码,供大家参考,具体内容如下思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环出来的,根据flag的值确定是灰色的小星星还是黄色的小星星,点击的时候获取当下这个盒子的index值,然后去更改stars数组中索引值小于等于index的每一项的flag就可以了. 当然,也可以用类名来控制灰色和黄色的小星星,在点击的时候操作类名也
微信小程序技巧之show内容展示，上传文件编码问题

show内容展示尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现写的更少,做的更多篇幅有限详细代码此处省略 <view class="show-warp"> <block wx:for="{{discuss}}" wx:key="index"> <template is="discuss" data="{{item}}"&
微信小程序实现星级评价

本文实例为大家分享了微信小程序星级评价的具体代码,供大家参考,具体内容如下效果图 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
微信小程序自定义轮播图

本文实例为大家分享了微信小程序自定义轮播图展示的具体代码,供大家参考,具体内容如下默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等. 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下: <view class="swiper-container"> <swiper autoplay="auto" interval=
微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &
微信小程序实现发送验证码按钮效果

本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下首先上图,最终效果如下: 实现关键点获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件.本例子中没有使用button 点击发送后,60秒内按钮处于disable状态点击发送后,text分为剩余秒数和后缀两部分 .form_group 使用 flex 布局代码 .wxml <view class="form_gr

微信小程序实现星级评分和展示

相关推荐

随机推荐