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


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 相关文章推荐
取得传值的函数
Oct 27 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
详谈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获取地址栏信息的代码
2008/10/08 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php实现数据库的增删改查
2017/02/26 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
Js的MessageBox
2006/12/03 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
Python实现视频下载功能
2017/03/14 Python
Python之py2exe打包工具详解
2017/06/14 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python中update的基本使用方法详解
2019/07/17 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
结婚典礼证婚词
2014/01/11 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL