一、效果展示

二、代码实现

星级评分部分：

<!-- wxml --><view class="starGrade"><text class="starGradeTxt">评价</text><view class='scoreBox'><view wx:for="{{starImgs}}" wx:key="id" bindtap='select' data-index="{{item.id}}"><image class="star" src="{{item.id > starId ? star_empty : star_full}}"></image></view><view class='scoreLevel'>{{starImgs[starId - 1].level}}</view></view></view>

// jsPage({data:{starImgs: [{id: 1,level : '非常不推荐',},{id: 2,level : '不推荐',},{id: 3,level : '一般',},{id: 4,level : '推荐',},{id: 5,level : '非常推荐',}],starId: 5,star_full: '/icons/score_full_big.png',//星星图标 满星star_empty: '/icons/score_empty_big.png',//星星图标 空星},/*** 星级评分点击事件*/select(e) {this.data.starId = e.currentTarget.dataset.index;this.setData({starId : this.data.starId,})},})

星级评分展示

<!-- wxml --><wxs module="filters" src="../../tools/filter.wxs"></wxs><!-- 星级评分展示 --><view class="container"><text class="score">{{filters.toFix(Info.grade)}}</text><viewclass="stars"wx:for="{{[1, 2, 3, 4, 5]}}"wx:key="{{index}}"wx:for-item="i"><view class="star-full" wx:if="{{Info.grade >= index + 1}}"><image class="image-star" src="../../icons/score_full.png" /></view><view class="star-empty" wx:else><image class="image-star" src="../../icons/score_empty.png" /></view></view></view>

// filter.wxsvar filters = {toFix: function (value) { var valueNum = parseFloat(value);return valueNum.toFixed(1)// 保留一位小数}}module.exports = {toFix: filters.toFix,}