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

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

黄舟
黄舟Original
2017-09-13 09:11:282396Durchsuche

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: [
      &#39;非常差&#39;,
      &#39;差&#39;,
      &#39;一般&#39;,
      &#39;好&#39;,
      &#39;非常好&#39;,
    ],
  },
  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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn