How to achieve star rating effect in mini program? (code example)

The content of this article is to introduce how small programs can achieve star rating effects? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Rendering

##wxml

##

<view>
  
    <block>
      <image> item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
        <view></view>
        <view></view>
      </image>
    </block>
  <view>
    <button>确认</button>
  </view></view>

wxss

.star-image{
  position: absolute;
  top: 50rpx;
  margin-left: 100rpx;
  width: 100rpx;
  height: 100rpx;
  src: "/images/icon/star-no.png";
}.item{
  position: absolute;
  top: 50rpx;
  width: 100rpx;
  height: 100rpx;
}

js

//index.js
var app = getApp()
var count = 0;
Page({
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '/images/icon/star-no.png',
    selectedSrc: '/images/icon/star-full.png',
    halfSrc: '/images/icon/star-half.png',
    key: 0,//评分
    status:'',    //0未课评 1已课评  },  /**
     * 生命周期函数--监听页面加载     */
  onLoad: function (options) {
    console.log(options.status)  },  /**
   * 点击左边,半颗星   */
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
      //只有一颗星的时候,再次点击,变为0颗
      key = 0;    }
    count = key
    this.setData({
      key: key    })

  },  /**
   * 点击右边,整颗星   */
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    count = key
    this.setData({
      key: key    })
  },
  // 确定按钮
  startRating: function (e) {
    wx.showModal({
      title: '分数',
      content: "" + count,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')        }
      }
    })
  }
})

Reprinted from the star rating of the mini program component

The above is the detailed content of How to achieve star rating effect in mini program? (code example). For more information, please follow other related articles on the PHP Chinese website!