小程序实现五星点评效果

本文实例为大家分享了小程序实现五星点评效果展示的具体代码，供大家参考，具体内容如下

先看一下效果图：

如上图所示，这里我们要添加三个五星点评。

我们这里之讲解一下，"描述相符"的点评

WXML代码

！-星星评价-view class=' comment 1-description ' style=' display : flex；flex-方向：行view class=' comment 1-description 1 '描述相符/view view class=' star-pos ' style=' display : flex；flex-方向：行view class='stars {{flag0=1？在“:”} }“bind”上，点击=“change color 1”/view view class=“stars”{ { flag 0=2？在“:”} }“bind”上，点击=“change color 2”/view view class=“stars”{ flag 0=3？在“:”} }“bind”上点击=“change color 3”/view view class=“stars”{ { flag 0=4 ' '在“:”} }“bind”上点击=“change color 4”/view view class=“stars”{ { flag 0=5？在“:”} }”绑定上，点击=“change color 5”/view/view/viewJS代码

Page({ data:{ flag:0 }，change color 1: FuncTion(){ var=this；那个。setdata({ flag : 1 })；}，changecolor 2:函数(){ var即=这个。setdata({ flag :2 })；}，ChangeColor 3: FuncTion(){ var即=这个。setdata({ flag : 3 })；}，ChangeColor 4: FuncTion(){ var即=这个。setdata({ flag :4 })；}，changecolor 5:函数(){ var即=这个。setdata({ flag : 5 })；}，WCSS代码

/*星星的样式*/.星星{背景图像： URL(' http://m。戴夫。VD。cn/static/xcx/v1/goo/star(灰)@ 1.5x。png ')；宽度： 43rpx高度： 43rpx背景尺寸尺寸： 43rpx 43rpx左边距left: 40rpx}。在{背景图像： URL(' http://m。戴夫。VD。cn/static/xcx/v1/goo/[电子邮件保护]')上；宽度： 43rpx高度： 43rpx背景尺寸size: 43rpx 43rpx/*左边距： 10px*/}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。