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-index="{{index}}" catchtap="computeScore"></image>     </block>   </view>   <view wx:if="{{isClick}}" class='text' style='font-size:{{size/2}}rpx;'>     <text wx:if="{{value=='0'}}" class='pointText'>暂无评分</text>     <text wx:elif="{{value=='1'}}" class='pointText'>差评</text>     <text wx:elif="{{value<'4'}}" class='pointText'>中评</text>     <text wx:else class='pointText'>好评</text>   </view> </view>

• 子组件index.wxss

.starsBox{   display: flex;   align-items: center;   justify-content: flex-start; } .stars{   width: 150rpx;   height: 50rpx;   display: flex;   align-items: center;   justify-content: flex-start; } .stars image{   width: 30rpx;   height: 30rpx; } .text{   color: #ccc;   margin-left: 20rpx; }

• 子组件index.js

Component({   properties: {     /* 显示有色星星的个数 */     value: {       type: Number,       value: 0,       /* 监听value值的变化 */       observer: function (newVal, oldVal, changedPath) {         this.init()       }     },     /* 设置星星大小 */     size: {       type: Number,       value: 30     },     /* 是否可点击，type为null表示值可以是任意类型 */     isClick: {       type: null,       value: false     }   },   attached() {     /* 组件生命周期函数，在组件实例进入页面节点树时执行 */     this.init();   },   data: {     stars: [0, 0, 0, 0, 0]   },   methods: {     init() {       let star = this.properties.value;       let stars = [0, 0, 0, 0, 0];       /* 图片名称，通过设置图片名称来动态的改变图片显示 */       for (let i = 0; i < Math.floor(star); i++) {         stars[i] = 'star';       }       if (star > Math.floor(star)) {         stars[Math.floor(star)] = 'halfStar';       }       for (let i = 0; i < stars.length; i++) {         if (stars[i] == 0) {           stars[i] = 'grayStar';         }       }       this.setData({         stars       })     },     /* 可点击时，用于计算分数 */     computeScore(e) {       let index = e.currentTarget.dataset.index;       let isClick = this.data.isClick;       if (isClick) {         let score = index + 1;         this.triggerEvent('compute', {           score         });       }     }   } })

3.父组件中引用

• 父组件index.wxml

<view class="score">     <view class="scoreItem">         <score value="{{shopGrade}}" size="46" isClick="true" bindcompute="computeGrade" />     </view>     <view class="scoreItem">         <score value="{{shopGrade1}}" size="46" />         </view> </view>

• 父组件index.json

{     "usingComponents": {         "score": "/component/score/index"     } }

• 父组件index.js

data: {     shopGrade: 0,     shopGrade1: 4.6, }, /* 评分处理事件 */ computeGrade(e) {     let score = e.detail.score;     this.setData({         shopGrade: score     }) },

4.vue中使用svg实现评分

• 首先在vue使用的index.html的模板文件中添加一个rem转换算法，因为我后面用的单位是rem

/* 在头部添加 */ <script type="text/javascript">       document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";     </script>

• 然后添加svg.vue文件，这个svg文件可以自己找图片生成，并设置对应的id

<template>     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">         <defs>             <symbol id="star" viewBox="0 0 32 32">                 <path class="path1" d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z">                 </path>             </symbol>         </defs>     </svg> </template> <script></script> <style></style>

• rating.vue文件引用svg.vue

<template>     <div class="ratingstar">         <section class="star_container">             <svg class="grey_fill" v-for="(num,index) in 5" :key="index">                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>             </svg>         </section>         <div class="star_overflow" :style="'width:'+rating*2/10+'rem'">             <section class="star_container">                 <svg class="orange_fill" v-for="(num,index) in 5" :key="index">                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>                 </svg>             </section>         </div>         <svgIcon></svgIcon>     </div> </template>  <script>   import svgIcon from '@/components/svg'   export default {     components: {       svgIcon     },     data() {         return {             rating: 4.2         }     },   } </script> <style lang="less" rel="stylesheet/less" scoped>     .ratingstar {         position: relative;         width: 100%;         .star_overflow {             overflow: hidden;             position: relative;             height: 0.65rem;         }         .star_container {             position: absolute;             top: 0.05rem;             width: 1rem;             display: flex;             justify-content: flex-start;             align-items: center;             .grey_fill {                 width: 0.94rem;                 height: 0.2rem;                 fill: #d1d1d1;             }             .orange_fill {                 width: 0.94rem;                 height: 0.2rem;                 fill: #ff9a0d;             }         }     } </style>

• 都有用到组件，可以查看下方的推荐文章中的购物车中的父子组件传值

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）