用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序之 满意度(五星评分)

纸飞机 2018-3-8 09:37

作者:廖毅,来自授权地址 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星,接下来直接查看源码: 满意度: css如下:.l-eva ...

作者:廖毅,来自

授权地址


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

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

接下来直接查看源码:

  1. class="l-evalbox row">
  2. class="l-evaltxt">满意度:
  3. class="l-evalist flex-1" bindtap="chooseicon">
  4. class="{{tabArr.curHdIndex >'0'? 'cur icon' : 'icon'}}" data-id="1">
  5. class="{{tabArr.curHdIndex >'1'? 'cur icon' : 'icon'}}" data-id="2">
  6. class="{{tabArr.curHdIndex >'2'? 'cur icon' : 'icon'}}" data-id="3">
  7. class="{{tabArr.curHdIndex >'3'? 'cur icon' : 'icon'}}" data-id="4">
  8. class="{{tabArr.curHdIndex >'4'? 'cur icon' : 'icon'}}" data-id="5">

css如下:

  1. .l-evalbox{
  2. height: 100rpx;
  3. padding: 0 3%;
  4. margin-top: 10rpx;
  5. background: #FFF;
  6. line-height: 100rpx;
  7. }
  8. .l-evaltxt{
  9. width: 120rpx;
  10. display: block;
  11. font-size: 26rpx;
  12. color: #666666;
  13. }
  14. .l-evalist .icon{
  15. background-position: -77rpx -246rpx;
  16. width: 40rpx;
  17. height: 43rpx;
  18. margin-right: 30rpx;
  19. }
  20. .l-evalist .cur{
  21. background-position: -128rpx -246rpx;
  22. }
  23. .l-evalist .icon:last-child{
  24. margin: 0;
  25. }

js代码如下:

  1. chooseicon:function(e){
  2. var strnumber=e.target.dataset.id;
  3. var _obj={};
  4. _obj.curHdIndex=strnumber;
  5. this.setData({
  6. tabArr: _obj
  7. });
  8. },

这样效果显示如下:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏