微信小程序星星评分组件

1.微信小程序：

效果图：

先看代码，用一个组件写好星星组件，然后调用即可

rating.wxml

  
    
  
  {{starId}}.00

rating.js

// component/rating/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
 
  },

  /**
   * 组件的初始数据
   */
  data: {
    imgs: [{
      id: 1
    }, {
      id: 2
    }, {
      id: 3
    }, {
      id: 4
    }, {
      id: 5
    }],
    starId: 5,
    src1: '/images/star.png',
    src2: '/images/grayStar.png',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    select(e) {
      console.log(e)
      this.data.starId = e.currentTarget.dataset.index;
      this.setData({
        starId: this.data.starId
      })
    }
  }
})

rating.wxss

.itembox {
  display: flex;
  align-items: center;
}
.scorePin{
  font-size:26rpx;
  font-weight: 600;
}

.star {
  width: 50rpx;
  height: 50rpx;
  margin: 0 5rpx;
  vertical-align: middle;
}

然后引用即可使用

这里通过循环判断显示有色和无色的星星，这是关键点

还有一个问题是如何显示4.2评分的星星，微信小程序用SVG生成星星；所以对于4.2评分的这个问题知道的道友可以提示下

 

2.VUE svg星星评分组件

效果图：

1.先用svg画好星星

svg.vue

这里用的是rem的单位，这里提供一个简单的px转rem的简单方法；在index.html里面引入

 

rating.vue

引入svg这个组件

原理：有色星星和无色星星放在同一个位置，控制有色星星svg的宽度来显示无色星星，这样就能做到实现显示4.2评分的星星了