用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序--发表评价满意度

Rolan 2019-5-7 00:46

话不多说,我们来看一下效果图:要实现的效果:点击到第几颗星,就要显示到第几颗星,接下来直接查看源码:view class="l-evalbox row" text class="l-evaltxt"满意度:/text view class="l-evalist flex-1" bindtap= ...

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

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

接下来直接查看源码:

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

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空间
收藏
原作者: 廖毅 来自: cnblogs