微信小程序评分组件Rate

 

效果图如下

组件支持功能：

1. 仅显示评分，或者显示+打分

2. 点击半颗星评分，点击整颗星评分

新建组件文件夹Rate

Rate.wxml文件内容

<!-- 评分组件 -->
<view class='starbox'>
  <text class='startext' wx:if="{{isShowStarValue}}">{{starValue}}</text>
  <view class='imgbox imgbox1' wx:if="{{showTap}}" >
    <block wx:for="{{stars}}" wx:for-index="index" wx:for-item="item" wx:key="key">
      <image class="star-image" style="width:{{WH}}rpx;height:{{WH}}rpx;left: {{item*(WH+10)}}rpx" src="{{starValue > item ?(starValue-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
        <view class="allItem" style="left:0rpx;width:{{WH}}rpx;height:{{WH}}rpx;" data-key="{{item+1}}" wx:if="{{isInteger}}" bindtap="selectAll"></view>
        <view wx:else>
          <view class="item" style="left:0rpx;width:{{WH/2}}rpx;height:{{WH}}rpx;" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
          <view class="item" style="left:{{WH/2}}rpx;width:{{WH/2}}rpx;height:{{WH}}rpx;" data-key="{{item+1}}" bindtap="selectRight"></view>
        </view>
        
      </image>
    </block>
  </view>
  <view class='imgbox imgbox2' wx:else>
    <block wx:for="{{stars}}" wx:for-index="index" wx:for-item="item" wx:key="key">
      <image class="star-image" style="width:{{WH}}rpx;height:{{WH}}rpx;left: {{item*(WH+10)}}rpx" src="{{starValue > item ?((starValue-item >= 0.5 && starValue-item < 1)?halfSrc:selectedSrc) : normalSrc}}">
      </image>
    </block>
  </view>
</view>

Rate.wxss文件

.starbox{
  height: 60rpx;
  display: flex;
  align-items: center;
}
.startext {
  font-size: 48rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: #ff793e;
  font-weight: 700;
  margin-right: 10rpx;
}
.imgbox {
  flex: 1;
  height: 60rpx;
  position: relative;
  display: flex;
  align-items: center;
}
.star-image {
  width: 50rpx;
	height: 50rpx;
  position: absolute;
  top: 4rpx;
  left: 0;
  /* margin-left: 50rpx; */
  src: "../images/no-star.png";
}
.item,.allItem{
  position: absolute;
  top: 0rpx;
}

Rate.json文件

{
  "component": true
}

Rate.js文件

Component({
  properties:{
    starValue:{
      value: 0,//父组件传过来的评分数字
      type:Number
    },
    disabled:{//是否只读，disabled="true"可评分，disabled="false"只显示（刚好写反了）
      value:false,
      type:Boolean
    },
    isShowStarValue:{
      value:false,//父组件传过来的是否显示评分
      type:Boolean
    },
    WH:{
      value: 50,//父组件设置评分星星的宽高
      type:Number
    },
    isInteger:{//父组件设置是操作整颗星 || 半颗星
      value:false,
      type:Boolean
    }
  },
 
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '../../assets/images/no-star.png',//没有点亮的星星图片
    selectedSrc: '../../assets/images/full-star.png',//完全点亮的星星图片
    halfSrc: '../../assets/images/half-star.png',//点亮一半的星星图片
    showTap:true//是否可以点击
  },
  methods: {
    //点击左边,半颗星
    selectLeft: function (e) {
      console.log("left");
      var key = e.currentTarget.dataset.key
      if (this.data.starValue == 0.5 && e.currentTarget.dataset.key == 0.5) {
        //只有一颗星的时候,再次点击,变为0颗
        key = 0;
      }
      this.setData({
        starValue: key
      })
      this.triggerEvent('getStarValue',{params: this.data.starValue});
    },
    //点击右边,整颗星
    selectRight: function (e) {
      console.log("right");
      var key = e.currentTarget.dataset.key
      this.setData({
        starValue: key
      })
      this.triggerEvent('getStarValue',{params: this.data.starValue});
    },
    //点击整颗星
    selectAll(e){
      console.log("all");
      var key = e.currentTarget.dataset.key;
      if (this.data.starValue == 1 && e.currentTarget.dataset.key == 1) {
        //只有一颗星的时候,再次点击,变为0颗
        key = 0;
      }
      this.setData({
        starValue: key
      })
      this.triggerEvent('getStarValue',{params: this.data.starValue});
    },
  },
  attached: function () {
    this.setData({
      showTap: this.properties.disabled
    })
  }
})

父组件引用Rate

父组件json

{
  "usingComponents": {
    "Rate": "../../components/Rate/Rate"
  }
}

父组件wxml

示例一：

<!-- 评分组件 展示效果：
     显示组件评分；
     没设置disabled，默认值是false，也就是只展示评分
-->
<Rate starValue="4"  isShowStarValue="true" id="star"></Rate>

示例二：

<!-- 效果：
    starValue="0" 默认0分，
    WH="48" 星星高度48rpx
    disabled="true" 可以点击评分
    isInteger="true" 点击评分是整颗星为单位 
-->

<Rate id="star" starValue="0" WH="48" disabled="true" bindgetStarValue="getStarValue" isInteger="true"></Rate>