Five star rating, let me show you how to do half star

Original link: https://mp.weixin.qq.com/s/d_BcA6uX_8MDO89Ta0CpnA

1

Overview

When we are learning WeChat mini-programs or doing projects, we should encounter the effect of five-star ratings , so how should we write the functions of five-star ratings and half-stars?

Today we will talk about the realization of the WeChat applet five-star rating and half-star effect , and share such a small tutorial today. Hope to be helpful to everyone .

Go get a small bench and wait for more updates

2

wxml

<!--index.wxml-->
<block wx:for="{{stars}}" wx:key="">
  <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
    <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
    <view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
  </image>
</block>

3

  js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '../../images/normal.png',
    selectedSrc: '../../images/selected.png',
    halfSrc:'../../images/half.png',
    key: 0,//评分
  },
  onLoad: function () {
  },
  //点击右边,半颗星
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
     if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
    //只有一颗星的时候,再次点击,变为0颗
       key = 0;
    }
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  },
  //点击左边,整颗星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    }) 
  }
})

4    css

/**index.wxss**/
.star-image{
  position: absolute;
  top: 50rpx;
  width: 150rpx;
  height: 150rpx;
  src: "../../images/normal.png";
}
.item{
  position: absolute;
  top: 50rpx;
  width: 75rpx;
  height: 150rpx;
}

The above code is the effect of Figure 2

Welfare at the end of the sentence:

Benefit 1: A collection of 100G resources such as front-end, Java, product manager, WeChat applet, Python, etc. will be released : https://www.jianshu.com/p/e8197d4d9 880

Welfare 2: A full set of detailed video tutorials for WeChat mini-program introduction and actual combat.

【How to receive】

Pay attention to [Programming Micro Journal] WeChat public account:

Reply to [Mini Program Demo] One-click to receive 130 Wechat Mini Program source code demo resources.

Reply [Receive resources] One-click to receive front-end, Java, product manager, WeChat applet, Python and other resource collections 100G resources to be released.