蝙蝠岛资源网 Design By www.hbtsch.com
一、前言
项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用。这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义。当然了,来的最快的其实是用图片代替。
二、微信小程序中评分功能实现
1.css文件中引入字体文件。也可以点此下载字体文件
@font-face { font-family: 'FontAwesome'; src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff"htmlcode">.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画出想要的五角星,至于动态实现那块其实一点也不难,思路清晰了,自然就水到渠成了。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]