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

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

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

先上图：

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


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.****.net/download/qq_39404258/11141525 （积分是****默认设置的，我也没办法）

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

相关推荐