微信小程序如何实现五星评价功能


Posted in Javascript onOctober 15, 2019

这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果

微信小程序如何实现五星评价功能

要实现的效果:点击到第几颗星,就要显示到第几颗星,<br data-filtered="filtered">/////////////////

接下来直接查看源码:

<view class="l-evalbox row">
 <text class="l-evaltxt">满意度:</text>
 <view class="l-evalist flex-1" bindtap="chooseicon">
  <icon class="{{tabArr.curHdIndex >'0'? 'cur icon' : 'icon'}}" data-id="1"></icon>
  <icon class="{{tabArr.curHdIndex >'1'? 'cur icon' : 'icon'}}" data-id="2"></icon>
  <icon class="{{tabArr.curHdIndex >'2'? 'cur icon' : 'icon'}}" data-id="3"></icon>
  <icon class="{{tabArr.curHdIndex >'3'? 'cur icon' : 'icon'}}" data-id="4"></icon>
  <icon class="{{tabArr.curHdIndex >'4'? 'cur icon' : 'icon'}}" data-id="5"></icon>
 </view>
</view<br data-filtered="filtered"><br data-filtered="filtered">

css如下:

.l-evalbox{
 height: 100rpx;
 padding: 0 3%;
 margin-top: 10rpx;
 background: #FFF;
 line-height: 100rpx;
}
.l-evaltxt{
 width: 120rpx;
 display: block;
 font-size: 26rpx;
 color: #666666;
}
.l-evalist .icon{
 background-position: -77rpx -246rpx;
 width: 40rpx;
 height: 43rpx;
 margin-right: 30rpx;
}
.l-evalist .cur{
 background-position: -128rpx -246rpx;
}
.l-evalist .icon:last-child{
 margin: 0;
}<br data-filtered="filtered">

js代码如下:

chooseicon:function(e){
   
 var strnumber=e.target.dataset.id;
  var _obj={};
  _obj.curHdIndex=strnumber;
  this.setData({
   tabArr: _obj
  });  
 },

这样效果显示如下:

微信小程序如何实现五星评价功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
jquery tools之tooltip
Jul 25 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 #Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 #Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 #Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 #Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 #Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
You might like
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue利用axios来完成数据的交互
2018/03/23 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
js里面的变量范围分享
2020/07/18 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
企业面试题试卷附带答案
2015/12/20 面试题
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
谢师宴答谢词
2015/01/05 职场文书
博士导师推荐信
2015/03/25 职场文书
通知函的格式
2015/04/27 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android