Wie erreicht man einen Sternebewertungseffekt im Miniprogramm? (Codebeispiel)

Der Inhalt dieses Artikels soll vorstellen, wie kleine Programme Sternebewertungseffekte erzielen können? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

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('用户点击确定')        }
      }
    })
  }
})

Nachdruck aus der Sternebewertung der Miniprogrammkomponente

Das obige ist der detaillierte Inhalt vonWie erreicht man einen Sternebewertungseffekt im Miniprogramm? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!