微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示

微信小程序实现评分功能

前言

	本人在用原生小程序开发时，需要用到评分功能，于是自己动手撸了一个评分显示组件。包含满星、半星功能。

废话少说，上才艺:

1、先任意创建组件，index.wxml代码如下：

<view class='starbox'>
 <view class='imgbox imgbox1' >
   <block wx:for="{{stars}}" wx:for-index="index" wx:for-item="item" wx:key="key">
     <image class="star-image" style="width:{{WH}}rpx;height:{{WH}}rpx;left: {{item*(WH+10)}}rpx" src="{{starValue > item ?(starValue-item < 1?halfSrc:selectedSrc) : normalSrc}}">
     </image>
   </block>
 </view>
</view>

2、index.js代码如下：

Component({
 properties:{
   starValue:{
     value: 0,//父组件传过来的评分数字
     type:Number
   },
   disabled:{//是否只读，disabled="true"可评分，disabled="false"只显示（刚好写反了）
     value:false,
     type:Boolean
   },
   isShowStarValue:{
     value:false,//父组件传过来的是否显示评分
     type:Boolean
   },
   WH:{
     value: 20,//父组件设置评分星星的宽高
     type:Number
   },
   isInteger:{//父组件设置是操作整颗星 || 半颗星
     value:false,
     type:Boolean
   }
 },

 data: {
   stars: [0, 1, 2, 3, 4],
   normalSrc: '../../assets/images/no-star.png',//没有点亮的星星图片
   selectedSrc: '../../assets/images/full-star.png',//完全点亮的星星图片
   halfSrc: '../../assets/images/half-star.png',//点亮一半的星星图片
   showTap:true//是否可以点击
 },
 
})

3、index.wxss代码如下：

.starbox{
 height: 0rpx;
 align-items: center;
}
.startext {
 font-size: 48rpx;
 height: 70rpx;
 line-height: 70rpx;
 color: #ff793e;
 font-weight: 700;
 margin-right: 10rpx;
}
.imgbox {
 flex: 1;
 height: 60rpx;
 position: relative;
 display: flex;
 align-items: center;
}
.star-image {
 width: 25rpx;
   height: 25rpx;
 position: absolute;
 top: 4rpx;
 left: 0;
 src: "../images/no-star.png";
}
.item{
 position: absolute;
 top: 0rpx;
}

4、使用评分组件，代码如下

1、在.json文件引入：
"usingComponents": {
   "Rate":"../../components/grade/index"
},
2、在.wxml文件代码如下：
<Rate starValue="5" id="star"></Rate>

5、注意，此篇文章的评分组件满分是10分制，如要满足实际业务需求，在组件代码更改即可

6、最终效果，可扫码查看：

5、所需素材下载地址：https://download.csdn.net/download/qq_43762932/85411562