微信小程序中怎么实现五星评价功能-创新互联
这篇文章主要介绍微信小程序中怎么实现五星评价功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

微信小程序 五星评价功能
话不多说,我们来看一下效果图:

要实现的效果:点击到第几颗星,就要显示到第几颗星,
接下来直接查看源码:
满意度: '0'? 'cur icon' : 'icon'}}" data-id="1"> '1'? 'cur icon' : 'icon'}}" data-id="2"> '2'? 'cur icon' : 'icon'}}" data-id="3"> '3'? 'cur icon' : 'icon'}}" data-id="4"> '4'? 'cur icon' : 'icon'}}" data-id="5">
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
});
},这样效果显示如下:

以上是“微信小程序中怎么实现五星评价功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页题目:微信小程序中怎么实现五星评价功能-创新互联
网页URL:http://www.scyingshan.cn/article/ddgded.html


咨询
建站咨询
