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


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 相关文章推荐
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
jQuery Ajax全解析
Feb 13 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
跟我学Laravel之路由
2014/10/15 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python logging模块用法示例
2018/08/28 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
高中运动会入场词
2014/02/14 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
经济贸易系求职信
2014/08/04 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏