小程序实现五星点评效果

来源：动视网责编：小OO 时间：2020-11-27 22:05:33

小程序实现五星点评效果

本文实例为大家分享了小程序实现五星点评效果展示的具体代码，供大家参考，具体内容如下：先看一下效果图。如上图所示，这里我们要添加三个五星点评。我们这里之讲解一下，“描述相符”的点评。WXML代码；

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了小程序实现五星点评效果展示的具体代码，供大家参考，具体内容如下：先看一下效果图。如上图所示，这里我们要添加三个五星点评。我们这里之讲解一下，“描述相符”的点评。WXML代码；

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

先看一下效果图：

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

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

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? 'on': ''}}" bindtap="changeColor1"></view>
 <view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view>
 <view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view>
 <view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view>
 <view class="stars {{flag0>=5? 'on': ''}}" 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;*/
}

小程序实现五星点评效果

推荐度：

点击下载本文 文档为doc格式

标签：小程序评价实现

热门焦点

小程序实现五星点评效果

小程序实现五星点评效果

小程序实现五星点评效果

最新推荐

猜你喜欢

热门推荐