小程序 | 微信小程序实现星级评分与星级评分展示

最新推荐文章于 2023-05-27 20:37:27 发布

J1FengZ

最新推荐文章于 2023-05-27 20:37:27 发布

阅读量1.3k

点赞数 1

分类专栏：微信小程序文章标签：小程序 javascript 微信小程序

本文链接：https://blog.csdn.net/JifengZ9/article/details/119871667

版权

微信小程序专栏收录该内容

4 篇文章 5 订阅

订阅专栏

本文档展示了如何在微信小程序中实现星级评分组件，包括点击事件处理和评分显示。通过WXML和JS代码，创建了一个可以交互的星级评分系统，并使用过滤器函数将评分值转换为固定小数位数。此外，还提供了星级评分的静态展示方法。

摘要由CSDN通过智能技术生成

一、效果展示

二、代码实现

星级评分部分：

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