微信小程序如何实现星级评分功能并展示给用户看？

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

本示例为家庭分享了微信小程序实现星级评分与展示的整体代码，供大家参考。内容包含：

一、效果展示- 星级评分- 星级评分展示

二、代码实现- 星级评分组件实现- 星级评分展示部分

css/* 星级评分样式 */.star-container { display: flex; align-items: center;}

.star-item { position: relative; width: 30rpx; height: 30rpx;}

.star-fill,.star-empty { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat;}

.star-fill { background-image: url('star_full.png');}

.star-empty { background-image: url('star_empty.png');}

javascript// 星级评分组件jsPage({ data: { starList: [], currentScore: 3, // 当前评分 }, onLoad: function () { this.initStar(); }, initStar: function () { const length=5; const starWidth=30; const fillWidth=this.data.currentScore * starWidth; const emptyWidth=(length - this.data.currentScore) * starWidth; this.setData({ starList: [ { fillWidth: fillWidth, emptyWidth: emptyWidth }, { fillWidth: fillWidth, emptyWidth: emptyWidth }, { fillWidth: fillWidth, emptyWidth: emptyWidth }, { fillWidth: fillWidth, emptyWidth: emptyWidth }, { fillWidth: fillWidth, emptyWidth: emptyWidth }, ], }); }, // 评分改变事件 onStarChange: function (e) { const score=e.detail.value; this.setData({ currentScore: score, }); this.initStar(); },});

json// 星级评分组件配置{ usingComponents: { star: /components/star/star }}

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

一、效果展示

星级评分

星级评分展示

二、代码实现

星级评分部分：

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

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