微信小程序实现评分功能

前言

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

废话少说，上才艺:

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