相思资源网 Design By www.200059.com
本文实例为大家分享了小程序实现五星点评效果展示的具体代码，供大家参考，具体内容如下
先看一下效果图：
如上图所示，这里我们要添加三个五星点评。
我们这里之讲解一下，“描述相符”的点评
WXML代码
<!--星星评价-->
<view class="comment1-description" style="display:flex;flex-direction:row;">
<view class="comment1-description1">描述相符</view>
<view class="star-pos" style="display:flex;flex-direction:row;">
<view class="stars {{flag0>=1" bindtap="changeColor1"></view>
<view class="stars {{flag0>=2" bindtap="changeColor2"></view>
<view class="stars {{flag0>=3" bindtap="changeColor3"></view>
<view class="stars {{flag0>=4" bindtap="changeColor4"></view>
<view class="stars {{flag0>=5" bindtap="changeColor5"></view>
</view>
</view>
JS代码
Page({
data:{
flag:0
},
changeColor1:function(){
var that = this;
that.setData( {
flag: 1
});
},
changeColor2:function(){
var that = this;
that.setData( {
flag:2
});
},
changeColor3:function(){
var that = this;
that.setData( {
flag: 3
});
},
changeColor4:function(){
var that = this;
that.setData( {
flag:4
});
},
changeColor5:function(){
var that = this;
that.setData( {
flag: 5
});
},
WCSS代码
/*星星的样式*/
.stars{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
margin-left: 40rpx;
}
.on{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
/*margin-left: 10px;*/
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
小程序,五星点评
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无小程序实现五星点评效果的评论...