Beispiel für das WeChat Mini-Programm zum Erreichen einer Fünf-Sterne-Bewertung

In diesem Artikel werden hauptsächlich relevante Informationen zu den Implementierungsbeispielen der Fünf-Sterne-Bewertung des WeChat-Miniprogramms vorgestellt. Hier finden Sie Implementierungsbeispiele, die Ihnen bei der Implementierung der modifizierten Funktion helfen können.

WeChat-Miniprogramm fünf -Sterne-Bewertung

Fünf-Sterne-Bewertungseffekt:

<view>
  <view class="zan-font-16 my-ib" bindtap="myStarChoose">
    <block wx:for="{{starMap}}">
      <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
      <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
    </block>
  </view>
  <!--★-->
  <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>

Hier zan-font-16,zan-c- red,zan-c-gray-dark ist der Stil von ZanUI-WeApp.

My-ib setzt hier nur die Anzeige auf Inline-Block.

Page({
  data: {
    star: 0,
    starMap: [
      '非常差',
      '差',
      '一般',
      '好',
      '非常好',
    ],
  },
  myStarChoose(e) {
    let star = parseInt(e.target.dataset.star) || 0;
    this.setData({
      star: star,
    });
  }
});

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonBeispiel für das WeChat Mini-Programm zum Erreichen einer Fünf-Sterne-Bewertung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!