本文实例为大家分享了微信小程序实现星级评分与展示的具体代码，供大家参考，具体内容如下
一、效果展示
星级评分
星级评分展示
二、代码实现
星级评分部分：
<!-- 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>// js
Page({
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>
<view
class="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.wxs
var filters = {
toFix: function (value) {
var valueNum = parseFloat(value);
return valueNum.toFixed(1)
// 保留一位小数
}
}
module.exports = {
toFix: filters.toFix,
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。