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

一、前言

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

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

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画出想要的五角星,至于动态实现那块其实一点也不难,思路清晰了,自然就水到渠成了。

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

时间: 2020-07-21

微信小程序实现展示评分结果功能

本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下 星星评分展示1 根据评分展示整颗行星或者半颗星星 星星评分展示2 根据评分按照小数点展示整颗行星或者部分星星 wxml <view class="conmmentbox"> <view class="starbox"> <view class="stars2" style="width: 130rpx"> &

微信小程序实现星级评分和展示

本文实例为大家分享了微信小程序实现星级评分和展示的具体代码,供大家参考,具体内容如下 星级评分分成两种情况: 一:展示后台给的评分数据   二:用户点击第几颗星星就显示为几星评分; 直接上代码 wxml部分 <view> <view>一:显示后台给的评分</view> <block wx:for="{{one_1}}" wx:key="item"> <image src='../../image/star.png

微信小程序五星评分效果实现代码

微信小程序五星评分效果实现代码 很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi

微信小程序 五星评分(包括半颗星评分)实例代码

微信小程序 五星评分 一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml <!--index.wxml--> <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-

微信小程序 五星评分的实现实例

微信小程序 五星评分 五星级评分效果: <view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class=&qu

微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

微信小程序“摇一摇”的实例代码

微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API 「wx.onAccelerometerChange(CALLBACK)」,我们可以用这个方法来模拟微信摇一摇功能,代码如下: Page({ onShow: function () { wx.onAccelerometerChange(function (e) { console.log(e.x) console.log(e.y) console.log(e.z) if (e.x > 1 && e.y > 1)

微信小程序 上传头像的实例详解

微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

微信小程序 sha1 实现密码加密实例详解

微信小程序 sha1 实现密码加密实例详解 在utils中的util.js 文件中增加 函数 实现 字符串转换为16进制加密后的字符串 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x

微信小程序 request接口的封装实例代码

微信小程序 request接口的封装实例代码 小程序request接口的封装(本质上是对request回调函数再次回调) module.exports.getData = function (url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var method = arguments.length > 2 && arguments[

微信小程序 获取二维码实例详解

 微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

微信小程序之GET请求的实例详解

微信小程序之GET请求的实例详解 学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat