微信小程序之店铺评分组件及vue中用svg实现的评分显示组件

最新推荐文章于 2024-06-19 15:33:49 发布

一只叮code的小蚊子

最新推荐文章于 2024-06-19 15:33:49 发布

阅读量603

点赞数 1

分类专栏：微信小程序 JavaScript 文章标签：评分组件微信小程序 svg实现评分 vue中使用svg图片

本文链接：https://blog.csdn.net/zjw222/article/details/84106575

版权

本文介绍如何在微信小程序中实现店铺评分显示和商品评价星星展示，以及在Vue应用中利用SVG实现评分组件。包括Vue组件的SVG占比形式、微信小程序的子组件详细代码展示以及父组件的引用方法。

摘要由CSDN通过智能技术生成

在微信小程序中，有遇到要展示店铺评分，或者是订单完成后对商品进行评价，用到了星星展示，查了下，在微信中无法使用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