当前位置:首页 > 微信 > 正文

微信小程序 五星评价功能

11-26 微信

标签:功能   tar   code   显示   idt   flex   last   func   src   

技术图片

 

 

 

要实现的效果:点击到第几颗星,就要显示到第几颗星,
///////////////// 接下来直接查看源码: <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 }); },

  这样效果显示如下:

 

技术图片

 

微信小程序 五星评价功能

标签:功能   tar   code   显示   idt   flex   last   func   src   

温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/weixin/15990.html

博客主人杰米WWW
杰米博客,为大家提供seo以及it方面技巧喜欢的朋友收藏哦!
  • 11365文章总数
  • 2266822访问次数
  • 建站天数
  • 头条文章

    图文推荐

    站长推荐

    友情链接