Fünf-Sterne-Bewertungen im WeChat-Miniprogramm-Mini-Programmentwicklung-php.cn

Fünf-Sterne-Bewertungen im WeChat-Miniprogramm

高洛峰

Freigeben： 2017-02-27 14:29:04

Original

3800 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!