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


Posted in Javascript onJuly 22, 2020

一、前言

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

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

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.根据自己项目的需求写出五角星的样式。参考下面

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

3.实现效果如下图

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

四、动态实现评价打分效果

1.样式同(二、微信小程序中评分功能实现)上。只是定义宽度的地方是动态赋值的。

2.定义需要展示的初始属性值。分别是要展示的黄色五角星,灰色五角星,以及那颗需要打分的的黄色五角星

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

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

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

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;">{{start}}</view>
  <view style="width:105px;margin:0 auto">
   <view style="display:flex;">   
    <view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view>
    <view wx:if="{{start_per>0}}" class="start" style="position:relative;">





<view class="icon icon_gray"></view>






<view class="icon icon_yellow "style="width:{{start_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>




  </view>
    <view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view>
   </view>  
  </view>   
</view>

5.实现效果图如下:

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

五、总结

这个效果的实现无非就三点。第一点引用字体。第二点比较重要,就是如何用css画出想要的五角星,至于动态实现那块其实一点也不难,思路清晰了,自然就水到渠成了。

到此这篇关于微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现的文章就介绍到这了,更多相关微信小程序评分展示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
详谈vue中router-link和传统a链接的区别
Jul 22 #Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
You might like
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python中的TCP socket写法示例
2018/05/11 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
质量管理标语
2014/06/12 职场文书
专项资金申请报告
2015/05/15 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers