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

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

场景

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

效果图

微信小程序----评价系统中的评星_第1张图片

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});
    }
})

原理

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

注意

  1. 由于我没有将 WXSS 和 iconPath.js 文件粘贴出来,所以直接复制代码,会看不到改效果。
  2. 如果想采用 form 表单提交 diagnosisStar 的值,可以采用在星级的位置影藏一个 input 标签,来实现值的提交。
  3. 此方法仅供参考,如果有更加快捷的方法,欢迎交流。

下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

posted @ 2018-07-18 18:29 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:(微信小程序----评价系统中的评星)