从实战学习微信小程序-电商星星评分功能（五）

现在，大多数电商系统都是通过五颗星星来进行商品评分的，所以我们要准备两种图片：实心星星和空心星星（如果你想要半星评价也可以加上一个半实星星，实现原理一样）

源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）

先上图：

自己点第几颗星星，它左边（包括自己）都会变为实心。


Page({/*** 页面的初始数据*/data: {flag:0,items: [{id: 0,title: '红裙子',imgUrl: '../../../img/shop1.jpg',spec: 'L',sale: '231',num: 3},],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//评分// 提交清空当前值bindSubmit: function () {var that = this;wx.showToast({title: '发布成功',icon: 'success',duration: 1500,mask: false,success: function () {that.setData({ info: '', noteNowLen: 0, 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});},
})

wxml

<!--pages/home/home.wxml--><view style='background:#EEE'>
<view class='lists'><!--bindtap绑定事件--><view class='list' bindtap='toDetail' wx:key="" wx:for="{{items}}" wx:for-index="index" wx:for-item="item" data-obj='{{item}}'><image class='list-left' src='{{item.imgUrl}}'></image><view class='right-text'>评分</view><view class="stars list-left {{flag>=1? 'on': ''}}" bindtap="changeColor1"></view><view class="stars list-left {{flag>=2? 'on': ''}}" bindtap="changeColor2"></view><view class="stars list-left {{flag>=3? 'on': ''}}" bindtap="changeColor3"></view><view class="stars list-left {{flag>=4? 'on': ''}}" bindtap="changeColor4"></view><view class="stars list-left {{flag>=5? 'on': ''}}" bindtap="changeColor5"></view></view><view class='downline'></view><textarea placeholder='请输入商品评论' style=' background: #FFF;width:100%'></textarea><view class="bottom"><view class="bottom-operate button" bindtap='toDetail' style='background-color:#FF0000;'>提交</view></view>
</view></view>

wxss


.lists{padding: 10rpx 0rpx;box-sizing: border-box;
}
.list{padding: 10rpx 20rpx;background: #FFF;box-sizing: border-box;display: flex;flex-direction: row;margin-top: 20rpx;
}
.column{margin-top: 30rpx;background: #FFF;display: flex;flex-direction: row;justify-content: space-between;
}
.list-left{width:5%;height:20px;
}
.list-right{width:70%;height:100%;padding-left:36rpx;display: flex;flex-direction: column;
}
image{padding: 10rpx;border: 1px #e0dada solid;
}
.right-text{padding-top: 10rpx;padding-left: 60rpx;padding-right: 40rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
.stars{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAArCAYAAADsQwGHAAAEcElEQVRYhb3Ya4hVVRQH8N+kM4aWBvbBrHSMUDPCNCtCK8oosTL6YBRFaNDboIf0sKQIJ8ukoMKiJ0QPopKIwj5ERYRpL0sto4eDjygNqcwszdE+rDNx7rnn3nvm3lN/GGbvfdZe63/23Xvt/zptm4ZN8R9gKm7CQ3irbOf9y3aY+HwYR2EMxmFXmQH2K9NZgssEYTgC15QdoK3k7XEAvsWw1Ng2HIlfywpS9krPVUkYhmJemUHKXOlDxCoPynn2F8ZiQxmBylzpu+QThv3RVVagskiPEwcwjduxJ9W/CBPLCFYW6ftUps93cA+eyMRaVEawMkifhnNS/R7cmLTnq8waUzG91YCtkm5TvXpP44ukvQ13Zp4vQr9WgrZK+kJMSvW3i9VNYwm+TvWPxqxWgrZCeoDYt2l0YUtmbA+uz4zdjYHNBi6ap9tFhjgWxyX/x2NwyqZbXN+1dMYbODvV34HV+BSfYxXW4u9mSA/EMSlyE5L+gAa+ZuKVOs9HJ6Ta69jsTmxW4TPxMqvFC1aRvhyniDw6Rt8Pyvs4tYDdYiFZ+4IefCNe4D083rZp2JSTk6B9xUZ8iBVYmvQbYRCm4QQcL37NwXVnVGNqfwzBPpG+auEPfIyVCckV+KmPwXr9vJr8EYlgtHiBScn/CeLar4UhvdtjLu7PPNyHO/Cm2Gc9TZBsBu3iDL0s9Hga87GgN+UtxsKMQRtmYL3/jzCRPWarJvwgFlCZp+fh0YzhiXhN/Z+rbHRhTmbsGakDnL1c5uD5zNjpeEn9VFUW5qkuGJaK7LavdyBLeq+QmK9nxmeIt21JMzTAHNWa+20haSu2Z941vjsxfDczfjEeUT/LNItZ4nNDGitxXsKnArW0x06cL9JcGlepPrCtYiaeVLkYa3BWwqMK9QTTb0IrrMuM34LbmudYgel4TuW2+w5nJvFz0Ujl/Zw4yBakfb2Ka2E+OlL9zUm8uhdXEWm6GWeo3Fvr+8quBn5MtXvEFd/daFJRPb1RZQ34fXFedbE11e6HTUUmFSU9ImNb1kpnt8HIIpOKkh6V6Ze10tns1FlkUlHSWWdlkc5miMOLTGqWdKPtcRIeEwer3mW0XJRh8AmeLUKmGdK78UMNu2miuliOK7EMXyXtvEJ2L87FwUJL78ixqUJfDmIv1ifB0j4uEDXdMtVl11ix6hvFbXpojv9tBXn8G7AIOlPt3q3RIcTVOqECJzTwMRS3ijz8gljZplCEdAeGp/pbcIM4jE+JcikPa6XkZArtQpB9hA+EEOvIsauJIqSzOXo2HsBhObY9YtUnipJpvNDne3JsYbLQHt1C0xxUFulsjs7DLvGFdKz4VLYqGV+DS8SvsQR/1pg/HPeKfT+5UbAipDvrPPtdFMSjcIVQaHnoxrWJr4VqK7gDFfiGXYR03tW6VVTqI3GzSuFTD1tFOTVCHMo8NdfZyEkR0r+k2htwnVjZrsyzvmC7+BA/ClervKy+bDS5yAfINlwqcvOLah+qVtBPVDA7VdenVfgHRNbjZnzEx1EAAAAASUVORK5CYII=");width: 40rpx;height: 40rpx;margin-top: 20rpx;background-size: 40rpx 40rpx;background-repeat: no-repeat;
}
.on{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAArCAYAAADsQwGHAAADKUlEQVRYhbXZz6uUVRzH8ddMt7yamonCtTILS/ohikFBcss2UVmUFLiqRbQQXOVGCPoLahOXIGhRkBe6EBQ3sG6Ji6AMAiFc1C6IC5EgEnLRGHVscWa60/TMPN9nnvN8NjNznu/5ft/P9zznnO9zprU8M6sBbcabmMOF3M6ncjvs6RM8jyfxVG7n7dwO8aAEDAfwSO4AuaFbWBhqW+i1Z1Nu6APYM9R2P17IGSQndBufjbi2gDU5A+XS69gy4to6vJ8rUCvTkrcGl3BLid09+L1usFyZfls5MMzLMClzZPp2XKxgvw8/1wmYI9NzFe1PqJntutA78GrFPruxv07QutDzE/b7VI1sR2uPFm7FndgrbSIv9X5Pou3SPPgcX+MclnElBFMwEVvYgPvwGJ7F09JaW1Vd1UZzBV/iW5yVlscV3CiCfkCqxg7iGbHlq0zX0DHZzQ6qg1NYwmn82lqemb0Nf03grNv7HJXJPvT0GJtJtHmq57TqMCqx70rzZcrqzeXS2jbO4/HMjtsjvtfVE/ij7/AnacI1rTpZP4Tv+W8WvsFrdYga1BEs9n8MD9083mow+CSPyhw+LHPyDj6ehKgBncSx4cYi6K40HEtNE5VoCS8qmAejhuuqtE2fahCqrxX/B1uU3ugLJ+64Z6wj7ZBF4NFVIGK3fojjNF4e17dsYlzDczhTsV9fl6Sbj+qstPSOvdlI8OtSXbJSIXhfm1SrY16REjVW0Yxdlbb7prU1YhSFvllz536DOhgxikJvrAFSRaEaKAodGrYM2ivAFIXeXo8lrLUCEzcKvaseS1hdzJQZRaEfqscS1rSM0I/WYwlrGveWGUWh9w18/zvYZ1G1or9vu7vMMAI9vEaP22Q6Uim5TnrTWI/jyrfyrtX31NKVKgIdWaMv4w0J8j2rhy5X8K50jnLU6FKgbTUxd5QFi0CPu/PzUkW2ER9J232ROvhAqkUO9/qN0igf/yoCfVdB2y+YxTZ8IRVVEV2X/uLYJh1CniuwuanMSQR68CDnjLRrPYwfDB1XVdAN/Djg67uBa1+VdY4equ/sBfptAsCo7pYeoz/LDP8Bp36ICBc/fk4AAAAASUVORK5CYII=");width: 40rpx;height: 40rpx;margin-top: 20rpx;background-size: 40rpx 40rpx;background-repeat: no-repeat;
}.item image{margin-left: 15rpx;margin-right: 15rpx;width: 50rpx;height: 50rpx;
}
/*细线*/
.downline{position: relative;height: 1rpx;width: 90%;margin-left: 5%;background-color: #ddd;z-index: 10;
}
/*底部操作栏*/
.bottom{width: 100%;height: 90rpx;bottom: 0;
}
.bottom-operate{width: 100%;height: 90rpx;display: flex;justify-content: center;flex-direction: row-reverse;align-items: center;font-size: 38rpx;color: #ffffff;
}
.bottom-operate .button{width: 20%;height: 100%;color:#FFF;
}

这里注意一点，url为什么那么一大串？因为微信小程序不支持本地图片，如果是网上图片直接放路径即可，但是是本地图片的话它会报这样的错：

xxxx.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。

它提出来了三种解决办法：1网络图片；2将图片转码为base64；3使用imgae标签 src属性。

而方法2将背景图片使用编码base64进行转换，可以在这个网址进行http://tool.css-js.com/base64.html 转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可。

源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）

从实战学习微信小程序-电商星星评分功能（五）相关推荐

从实战学习微信小程序-电商首页前端（一）
刚开始接触小程序就被分配了一个小程序的前端项目,我只能一边学习一边做,做起来发现也就那么回事,如果只看api不动手的话,那么多内容是记不住的,但不得不说微信小程序api封装了好多内容,简单好用,但微信 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
视频教程-微信小程序电商实战-PHP
微信小程序电商实战多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程序员学院AP ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
微信小程序电商实战—环境搭建篇
本篇文章已同步发布于个人博客 https://qiucode.cn/article/90 可体验秋码淘好货微信小程序哦! 1.开发工具下载可到微信公众号-小程序下载 https://mp.we ...

从实战学习微信小程序-电商星星评分功能（五）

从实战学习微信小程序-电商星星评分功能（五）相关推荐

最新文章

热门文章