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

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

一、效果展示

星级评分

星级评分展示

二、代码实现

星级评分部分：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程宝库。

功能：1、点击我的好友会展开下拉出具体的好友2、再次点击，会折叠内容3、首次点击某个具体的好友，只有当前这个好友高亮4、再次点击这个好友时，高亮状态就会消失主要练习：js绑定事件慢慢修改小细节：再次点 ...