您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍微信小程序中怎么实现五星评价功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
微信小程序 五星评价功能
话不多说,我们来看一下效果图:
要实现的效果:点击到第几颗星,就要显示到第几颗星,
接下来直接查看源码:
<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 }); },
这样效果显示如下:
以上是“微信小程序中怎么实现五星评价功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。