Fünf-Sterne-Bewertungen im WeChat-Miniprogramm

高洛峰
Freigeben: 2017-02-27 14:29:04
Original
3766 Leute haben es durchsucht

Wir haben oft Bewertungen für Dienstleistungen oder Artikel. Der übliche Weg ist, den Bewertungseffekt durch Berühren zu erzielen.


Schauen wir uns zunächst die umgesetzten Renderings an:

Fünf-Sterne-Bewertungen im WeChat-Miniprogramm

Wie im Bild oben zu sehen ist, wollen wir hier noch drei Fünf-Sterne hinzufügen Bewertungen. Die erste [Beschreibung stimmt überein], die zweite [Liefergeschwindigkeit] und die dritte [Serviceeinstellung].

Erläutern wir hier den Kommentar „Beschreibung stimmt überein“
WXML-Code

<!--星星评价-->
  <view class="comment1-description" style="display:flex;flex-direction:row;">
  <view class="comment1-description1">描述相符</view>
  <view  class="star-pos" style="display:flex;flex-direction:row;">
       <view class="stars  {{flag0>=1? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor1"></view>
       <view class="stars  {{flag0>=2? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor2"></view>
       <view class="stars  {{flag0>=3? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor3"></view>
       <view class="stars  {{flag0>=4? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor4"></view>
       <view class="stars  {{flag0>=5? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor5"></view>
   </view>
   </view>
Nach dem Login kopieren

JS-Code

Page({
  data:{
      flag:0
  },
  changeColor1:function(){
        var that = this;
        that.setData( {
            flag: 1
        });
  },
  changeColor2:function(){
        var that = this;
        that.setData( {
            flag:2
        });
    },
  changeColor3:function(){
        var that = this;
        that.setData( {
            flag: 3
        });
    },
  changeColor4:function(){
        var that = this;
        that.setData( {
            flag:4
Nach dem Login kopieren

Hier wird der Wert eines Variablenflags übergeben Änderungen zur Steuerung und Bestimmung des spezifischen Werts des [Beschreibungsübereinstimmungen]-Scores.
Eine Ereignisfunktion, die die Punktzahl ändert, ist an jeden Stern gebunden, um die Wertänderung festzulegen.

WCSS-Code

/*星星的样式*/
.stars{
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
    width: 43rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    margin-left: 40rpx;
}
.on{
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
    width: 43rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    /*margin-left: 10px;*/
}
Nach dem Login kopieren


Weitere Artikel zu Fünf-Sterne-Bewertungen in WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!