微信小程序如何实现星级评分及展示功能？

本文共计573个文字，预计阅读时间需要3分钟。

原文示例：本文字例为大家分享了微信小程序实现星级评价与展示的具体代码，供大家参考。内容如下：

一、效果展示

星级评价与展示

二、代码实现

星级评价部分：

wxml

wxss/* 星级评价样式 */.star-view { display: flex;}.star-item { width: 20px; height: 20px;}.star-empty { background-color: #ccc;}.star-full { background-color: #ffcc00;}

javascript// 星级评价逻辑Page({ data: { star: [1, 2, 3, 4, 5], currentStar: 3 }})

本文实例为大家分享了微信小程序实现星级评分与展示的具体代码，供大家参考，具体内容如下

一、效果展示

星级评分

星级评分展示

二、代码实现

星级评分部分：

<!-- 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, }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。