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


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实现简单的二级联动
Mar 19 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
Vue底层实现原理总结
Feb 17 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php采集神器cURL使用方法详解
2016/02/19 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php实现socket推送技术的示例
2017/12/20 PHP
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
简单学习Python time模块
2016/04/29 Python
python绘制圆柱体的方法
2018/07/02 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
用 Python 制作地球仪的方法
2020/04/24 Python
linux面试题参考答案(8)
2016/04/19 面试题
学生会竞选自荐信
2013/10/12 职场文书
优秀部门获奖感言
2014/02/14 职场文书
高中运动会广播稿
2014/09/16 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
高中班主任培训心得体会
2016/01/07 职场文书