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


Posted in Javascript onMarch 09, 2017

微信小程序 五星评价功能

话不多说,我们来看一下效果图:

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

要实现的效果:点击到第几颗星,就要显示到第几颗星,

  接下来直接查看源码:

<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>

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;
}

js代码如下:

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

这样效果显示如下:

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

感谢阅读,希望帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 #Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 #Javascript
Vue监听数据对象变化源码
Mar 09 #Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 #Javascript
Node.js常用工具之util模块
Mar 09 #Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 #Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JS中的防抖与节流及作用详解
2019/04/01 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
幼儿园家长会邀请函
2014/01/15 职场文书
检讨书范文300字
2015/01/28 职场文书
付款证明模板
2015/06/19 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
小学副班长竞选稿
2015/11/21 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis