微信小程序实现星星评分效果

2024-10-03 03:46:51

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

思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。
我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环出来的，根据flag的值确定是灰色的小星星还是黄色的小星星，点击的时候获取当下这个盒子的index值，然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。
当然，也可以用类名来控制灰色和黄色的小星星，在点击的时候操作类名也是可以实现的。

实现代码如下：

*.wxml文件
<view class="container">
 <view class='stars'>
 <image src=''></image>
 <view class='content'>
 <view>评分</view>
 <view>
 <view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view>
 </view>
 </view>
 </view>
 <view class='reviews'>
 <textarea placeholder='请写下购买体会或商品的相关信息，可以拉其他小伙伴提供参考~（评价在100字以内）'></textarea>
 </view>
</view>

*.wxss文件
.stars{
 padding:85rpx 0 60rpx 273rpx;
 box-sizing: border-box;
 position: relative;
 border-bottom: 1rpx solid #ececec;
 background-color: #fff;
}
.stars image{
 width: 190rpx;
 height: 190rpx;
 border: 1rpx solid #000;
 position: absolute;
 top: 41rpx;
 left: 36rpx;
}
.stars .content view{
 font-size: 32rpx;
 color: #4a4a4a;
}
.stars .content>view:last-of-type{
 height: 40rpx;
 margin-top: 48rpx;
}
.stars .content>view:last-of-type view{
 float: left;
 width: 42rpx;
 height: 42rpx;
 margin-right: 25rpx;
 background-size: 100% 100%;
}

*.js文件
 data: {
 stars:[
 {
 flag:1,
 bgImg: "/star.png",
 bgfImg:"/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 }
 ]
 },
 score:function(e){
 var that=this;
 for(var i=0;i<that.data.stars.length;i++){
 var allItem = 'stars['+i+'].flag';
 that.setData({
 [allItem]: 1
 })
 }
 var index=e.currentTarget.dataset.index;
 for(var i=0;i<=index;i++){
 var item = 'stars['+i+'].flag';
 that.setData({
 [item]:2
 })
 }
 },

代码分析：

效果图：

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

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s
微信小程序五星评分的实现实例

微信小程序五星评分五星级评分效果: <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
微信小程序实现星级评分和展示

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

一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替. 二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件 @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boots
微信小程序使用template标签实现五星评分功能

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

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

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

本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下星星评分展示1 根据评分展示整颗行星或者半颗星星星星评分展示2 根据评分按照小数点展示整颗行星或者部分星星 wxml <view class="conmmentbox"> <view class="starbox"> <view class="stars2" style="width: 130rpx"> &
微信小程序实现笑脸评分功能

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

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

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

本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下效果预览: 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> 星级评分 </view> <view> <block class="brightStars"> <image data-index='0' data-no="{{item}}" wx:for="{{starsBox}}" bindtap="changePic&q
微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat
微信小程序左滑删除效果的实现代码

今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个
微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

微信小程序实现星星评分效果

相关推荐

随机推荐