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


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 相关文章推荐
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Vue实现简单的留言板
Oct 23 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
第五节 克隆 [5]
2006/10/09 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python中for用来遍历range函数的方法
2018/06/08 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
通过shell+python实现企业微信预警
2019/03/07 Python
django-csrf使用和禁用方式
2020/03/13 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
老师推荐信
2013/10/28 职场文书
学校后勤人员职责
2013/12/27 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
我的中国心演讲稿
2014/09/04 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
幼师中班个人总结
2015/02/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书