小程序渐变的五星评价

概述

美团、饿了么很多软件都会带上评价星标，图片展示的方式可以让人非常直观的查看评店铺评价。
该组件可以输入一个数值、即可展示对应的分值。优点：小图标为css+iconfont字体，无需引用
多余的js、css样式或者图片，体积非常小;以小程序组件为例，其他语言也可参考;已经为您准备好base64的图
标，无需您自己生成。本文分为：概述、代码步骤、成品展示、git代码地址四个部分。

成品展示

代码

思路：五颗渐变的星星颜色不一样，加上灰色的，总共六种样式的五角星。先排列五颗渐变的星星，
每个小星星旁边放入一个布局为absolute的灰色小星星用来挡住有颜色的小星星。通过控制灰色
星星的宽度就可以达到我们的目的。

 <!-- 父页面 --><star num="5"></star><!-- 组件 --><block><view class="starc"><view class="starc1"><view class="star1 iconfont icon-shoucangjia"></view><view class="starg iconfont icon-shoucangjia" style="width: {{starWL[0]}};"></view></view><view class="starc1"><view class="star2 iconfont icon-shoucangjia"></view><view class="starg iconfont icon-shoucangjia" style="width: {{starWL[1]}};"></view></view><view class="starc1"><view class="star3 iconfont icon-shoucangjia"></view><view class="starg iconfont icon-shoucangjia" style="width: {{starWL[2]}};"></view></view><view class="starc1"><view class="star4 iconfont icon-shoucangjia"></view><view class="starg iconfont icon-shoucangjia" style="width: {{starWL[3]}};"></view></view><view class="starc1"><view class="stari iconfont icon-shoucangjia"></view><view class="starg iconfont icon-shoucangjia" style="width: {{starWL[4]}};"></view></view></view></block>

 /* components/Star/Star.wxss */@font-face {font-family: 'iconfont';src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');  font-weight: normal;font-style: normal;font-display: swap;} .iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}.icon-shoucangjia:before {content: "\e600";}.starc {display: flex;flex-direction: row;width: 120rpx;justify-content: space-between;}.starc1 {position: relative;transform: rotateY(180deg);}.starc .iconfont {font-size: 18rpx;margin-top: 7rpx;}.star1 {color: #FF7531;}.star2 {color: #FC552C;}.star3 {color: #FE3E24;}.star4 {color: #FE2D1D;}.stari {font-family: "iconfont";color: #FB1C1C;}.starg {position: absolute;overflow: hidden;color: #DCDCDC;top: 0;}

Component({/*** 组件的属性列表*/properties: {num: {type: Number,value: 5},},/*** 组件的初始数据*/data: {starWL: []},lifetimes: {attached: function () {// 获取星星的值let n = this.data.num;n = n * 20;// 共有几个满星、余数是多少let all = Math.floor(n / 20);let rest = n - all * 20;console.log(n, all, rest)//星星宽度数组let starWL = []for (let i = 0; i < 5; i++) {if (all > i) {starWL[i] = 0} else {if (i - all != 0) {starWL[i] = '100%'} else {starWL[i] = (1 - rest / 20) * 100 + '%'}}}console.log(starWL)this.setData({starWL})}}
})

git地址
小程序开发工具链接，点击可直接打开组件；

小程序渐变的五星评价相关推荐

微信小程序笔记--显示五星好评（注意是显示不是点击评价！）
网上看了好多都是点击事件实现五星评价,想做一个只显示五星的微信小程序模板,结果网上都不全,所以还是自己写一个免得忘记,学艺不精,如果你有更好的方法请一定要留下评论或者私信给我,十分感谢! 1.先上一个 ...
「小程序JAVA实战」小程序的留言和评价功能（70）
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
微信小程序开发(十一)五星好评
在之前的原生iOS开发中写了一个<[iOS]星星评分控件HGDQStars>,这个在原生开发里面可以给出0~5之间的任意一个分数,使用起来也很方便. 最近在做小程序开发,也需要一个五星好评 ...
微信小程序开发之五星评分
一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. gif: 代码: 1.index.wxml <block wx:for="{{star ...
最新最全的校园跳蚤小程序，二手商城小程序，二手书城小程序，带五星评分功能，发布商品，模糊搜索，评论，校园论坛功能
从今天开始带领大家实现一款云开发版的校园二手商城小程序技术选型 1,前端小程序原生框架 css JavaScript 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云开发 ...
微信小程序开发之五星好评
首选需要有两个星星代码实现 html代码 css代码 .right .star { float: left; width: 54rpx; height: 54rpx; text-align: cen ...
毕业设计-基于微信小程序的课程教学评价系统
目录前言课题背景与简介实现设计思路一.评教系统架构设计二.评教系统实现三.总结实现效果样例更多帮助前言
微信小程序相关项目实例集合
大家下午好,上午逛博客的时候发现了一片有关于小程序的项目实例合集,我大致看了一下挺好的,特此拿过来希望可以帮到小伙伴们. 如下: wx-gesture-lock 微信小程序的手势密码 WXCustom ...
[荐] 微信小程序模板源码合集
关注公众号风色年代(itfantasycc) 200G 小程序资料合集送上~ wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组 ...

小程序渐变的五星评价

小程序渐变的五星评价

小程序渐变的五星评价相关推荐

最新文章

热门文章