微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

2024-03-03 22:32

本文主要是介绍微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言

项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用。这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义。当然了,来的最快的其实是用图片代替。

二、微信小程序中评分功能实现

1.css文件中引入字体文件。也可以点此下载字体

@font-face {  font-family: 'FontAwesome';  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); 
}

2.根据自己项目的需求写出五角星的样式。参考下面

.star{margin-right:10rpx;}/*五角星之间的间距*/
/*五角星*/
.star .icon:before {content: '\f005'; font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block;  overflow: hidden;}
.star .icon {display: block; font-size: 21px; text-align: center; width: 38rpx;height: 56rpx;line-height: 56rpx;position: relative;white-space: pre;}
/*灰色五角星*/
.star .icon_gray{color:#aaa}
/*黄色五角星*/
.star .icon_yellow:before {color: #F63;}

三、静态实现五角星评分

1.如果是静态实现,可以直接设置宽度来实现评分效果,直接定义需要变色的五角形的比例。如果是颗星可以直接定义伪类元素宽度是50%;如果是1/3颗星可以定义宽度是33%;同样的,如果是2/3颗星星,直接定义宽度为66%。如下:

/*自定义长度的黄色五角星*/
.half_star .icon_yellow:before {width: 50%;} 

2.html的代码如下

 <view ><view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">静态评价星级</view><view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">4.50</view><view style="width:105px;margin:0 auto"><view style="display:flex;">        <view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view></view>        </view>                 </view>  

3.实现效果如下图
静态展示五角星评分
四、动态实现评价打分效果

1.样式同(二、微信小程序中评分功能实现)上。只是定义宽度的地方是动态赋值的。
2.定义需要展示的初始属性值。分别是要展示的黄色五角星,灰色五角星,以及那颗需要打分的的黄色五角星。

Page({/*** 页面的初始数据*/data: {    yellow_star:0,//黄色五角星,默认一开始是黄色星星0分gray_star:5,//灰色五角星 灰色星星是5颗 表示是5分star_per:0,//自定义长度黄色五角星  一开始需要打的是0分}
})

3.根据返回的结果改变初始化的数据 ,比如,后台返回的评分是3.62

var star="3.62";//后台获取的评分
var yellow_star=parseInt(star);//需要展示的整个黄色5角星,3.62分的时候需要展示3颗整个的黄色五角星。
var star_per=parseFloat(star-yellow_star)*100;//3.62颗评价分-3颗整个黄色星,是0.62的占比,先将它*100。这样赋值的时候比较方便。也就是一颗灰色的星星中展示出62%的黄色部位。
var gray_star=parseInt(5-star);//需要展示的灰色星星,正常是5-3.62=1.38颗,0.38颗已经是在百分比中了。所以此时最后需要展示的是1整个灰色五角星
this.setData({    star:star,  //评分数       yellow_star:yellow_star,//整个黄色五角星的个数star_per:star_per,//一颗灰色五角星中黄色五角星的占比gray_star:gray_star,//整个灰色五角星的数量
})

4.最后一步就是页面中如何渲染的问题了。由于微信小程序中无法实现动态修改伪类元素的样式值【可能是我不会,会的同学可以指点一下】,所以,那颗占百分比的黄色五角星,我用的是底部一个灰色五角星+覆盖一个黄色五角星,都是用的绝对定位,最后黄色五角星用的是width+overflow:hidden 把多余的部位隐藏了。

<view><view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">动态评价星级</view><view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">{{star}}</view><view style="width:105px;margin:0 auto"><view style="display:flex;">            <view class="star" wx:for="{{yellow_star}}"><view class="icon icon_yellow"></view></view><view wx:if="{{star_per>0}}" class="star" style="position:relative;">            <view class="icon icon_gray"></view>            <view class="icon icon_yellow "style="width:{{star_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>          </view><view class="star" wx:for="{{gray_star}}"><view class="icon icon_gray"></view></view></view>     </view>            
</view>

5.实现效果图如下:
动态实现五角星展示
五、总结

这个效果的实现无非就三点。第一点引用字体。第二点比较重要,就是如何用css画出想要的五角星,至于动态实现那块其实一点也不难,思路清晰了,自然就水到渠成了。如果觉得有不妥的地方还望赐教。觉得有更好的方法也可以分享一下哦。

这篇关于微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/771119

相关文章

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S