在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分
1.效果图
微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星
2.微信实现店铺评分显示及商品评价星星展示
- 子组件index.wxml,可以动态的控制星星的大小
<!-- (size * stars.length + (size/2) * 4 + 20 )这里的话,是在可以点击的时候,加上了好评的字体的长度 -->
<view class='starsBox' style='width:{
{isClick?(size * stars.length + (size/2) * 4 + 20 ):(size * stars.length)}}rpx;height:{
{size}}rpx;'>
<view class='stars' style='width:{
{size * stars.length}}rpx;height:{
{size}}rpx;'>
<block wx:for="{
{stars}}" wx:key="{
{index}}">
<image src="/images/{
{item == 0 ? 'grayStar':item}}.png" style='width:{
{size}}rpx;height:{
{size}}rpx;' data-ind