微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示

本文链接：https://blog.youkuaiyun.com/qq_43884155/article/details/109471090

一、实现整颗星星评分（默认一颗星）

1.效果图
在这里插入图片描述
2.准备图片

3.remark.wxml

<view class="stars">
   <view wx:for="{
    {stars}}" wx:key="index" data-index="{
    {index}}" bindtap='score'>
     <image src="{
    {index > 0 && item.flag == 1 ? item.bgImg : item.bgfImg}}"></image>
   </view>
 </view>

4.remark.wxss

.stars {
   
  display: flex;
}

.stars view {
   
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.stars view image {
   
  width: 100%;
  height: 100%;
}

5.remark.js

  data: {
   
    // 星星列表
    stars: [
      {
   
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar1.png"
      },
      {
   
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar2.png"
      },
      {
   
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar3.png"
      },
      {
   
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar4.png"
      },
      {
   
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar5.png"
      }
    ],
    star_num: 1,  // 默认1分
  },

  // 选择范围
  score: function (e) {
   
    var _this = this;
    for (var i = 0; i < _this.data.stars.length; i++) {
   
      var allItem = 'stars[' + i + '].flag';
      // 全部变为未选中状态
      _this.setData({
   
        [allItem]: 1
      })
    }
    var index = e.currentTarget.dataset.index;
    for (var i = 0; i <= index; i++) {
   
      var i