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


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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
浅谈js中的this问题
Aug 31 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python程序控制语句用法实例分析
2020/01/14 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
编辑求职信样本
2013/12/16 职场文书
公司租房协议书
2014/10/14 职场文书
工会经费申请报告
2015/05/15 职场文书
看雷锋电影观后感
2015/06/10 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android