Heim > Artikel > WeChat-Applet > 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!