微信小程序----评价系统中的评星
2023-09-14 09:01:36 时间
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 ,实现需要的星级效果。
注意
- 由于我没有将 WXSS 和 iconPath.js 文件粘贴出来,所以直接复制代码,会看不到改效果。
- 如果想采用 form 表单提交 diagnosisStar 的值,可以采用在星级的位置影藏一个 input 标签,来实现值的提交。
- 此方法仅供参考,如果有更加快捷的方法,欢迎交流。
WXRUI体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
下载
相关文章
- 解决安卓网页在微信浏览器中点击图片会自动放大
- 手机怎么设置信用卡还款提醒?能用微信提醒吗?
- 微信小程序----switch组件(开关选择器)
- linux ubuntu22.04安装原生版微信 QQ 企业微信等
- [FE] JS 判断当前是否在微信浏览器中的最新代码
- SAP系统和微信集成的系列教程之十:如何在SAP C4C系统里直接回复消息给微信用户
- 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息
- C4C微信集成 - agent在C4C系统回复,微信用户在微信端直接收到
- SAP系统和微信集成的系列教程之一:微信开发环境的搭建
- SAP系统和微信集成的系列教程之三:微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据
- 微信小程序踩坑:wx.openDocument(Object object)打不开文件
- Python发送微信消息(文字、图片、文件)给指定好友和微信群,零基础可看懂(附源码和教程)
- 微信公众号抓取相关资料链接
- 高仿微信新消息提示音功能
- 【微信小程序】一文带你吃透小程序开发框架——视图层中的事件系统
- 【前端面试题——微信小程序】
- WordPress对接微信小程序遇到的问题