微信小程序----评价系统中的评星

最新推荐文章于 2021-11-15 22:27:04 发布

Rattenking

最新推荐文章于 2021-11-15 22:27:04 发布

阅读量5.9k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_38082783/article/details/81103111

版权

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

82 篇文章

订阅专栏

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

场景

在电商、医疗等带有用户评价的时候，常见的就是对服务等进行星级评定，在小程序中如何更加简单的实现该功能？

效果图

WXML

<text class='rui-star' wx:for="{{[1,2,3,4,5]}}" wx:key="star1" bindtap='getStar' data-star='{{item}}' style='background:url({{diagnosisStar >= item ? iconPath.iconStar0 : iconPath.iconStar1}}) no-repeat center center/6.7vw 6.7vw;'></text>

JS

Page({
    data: {diagnosisStar: 1},
    // 获取点击的星位
    getStar(e){
        let star = e.currentTarget.dataset.star;
        this.setData({ diagnosisStar: star});
    }
})

原理

将需要的图标（灰色星星和黄色星星）转行为 base64 储存在本地文件中（图片在线转换base64工具），例如：本demo中的 iconStar0 和 iconStar1 就存储在 iconPath.js 文件，需要用时取出。
循环评星级数，由于大多数都是五颗星，因此此处采用数组[1,2,3,4,5]。
在js 的data中初始化设置默认值 diagnosisStar ，一般设置为 0 ，由于需要，此处设置为 1 。
给每一个星绑定点击事件 getStar ，点击事件是为了获取当前点击的位置，因此需要在标签设置 data-star=’{{item}}’，传点击位。
在 getStar 事件获取点击位，然后将点击位的值赋值（setData方法）默认值 diagnosisStar ，实现需要的星级效果。