JS

代码语言:javascript

AI代码解释

复制

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 标签,来实现值的提交。此方法仅供参考,如果有更加快捷的方法,欢迎交流。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。

原始发表:2018/07/18 ,如有侵权请联系 [email protected] 删除

网址:微信小程序 https://mxgxt.com/news/view/1968891

⬅️上一篇:商标设计,企业形象代言人
➡️下一篇:50. aster/astr=s

相关内容

明星微信小程序
微信小程序和微信有什么关系
微信小程序什么意思
胖小豹微信小程序,胖小豹小程序介绍&二维码
微信编程小程序叫什么来着
微信小程序看cp排名
编程微信小程序叫什么来着
微信小程序人物关系
微信小程序是什么意思
如何取消小程序授权?微信小程序授权解除教程

随便看看