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


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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery聚合函数实例
May 21 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
layer弹出层显示在top顶层的方法
Sep 11 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
Zerg基本策略
2020/03/14 星际争霸
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php关联数组快速排序的方法
2015/04/17 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python celery原理及运行流程解析
2020/06/13 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
后进生转化工作制度
2014/01/17 职场文书
公司活动总结范文
2014/07/01 职场文书
励志演讲稿200字
2014/08/21 职场文书
小学推普周活动总结
2015/05/07 职场文书
详解Vue的options
2021/05/15 Vue.js
关于JavaScript回调函数的深入理解
2021/06/27 Javascript