Uniapp realisiert gleitenden Scoring-Effekt

<Vorlage>
 <Ansicht>
  <Ansichtsklasse="flex" Stil="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- Durchlauf der Punkteliste-->
      <!-- Stellen Sie das Touch-Ereignis und das Klick-Ereignis auf die gleiche Methode ein, sonst wird das Ereignis nicht ausgelöst, wenn Sie klicken, aber nicht schieben. -->
      <Ansichtsklasse='starLen' @touchmove='changeScore' @tap='changeScore' >
        <!-- Verwenden Sie den ternären Operator, um dynamisch zu ändern, welches Bild angezeigt wird. Score ist die Punktzahl in js, Index ist der Index von scoreArray-->
        <!-- Der src-Teil kann wie folgt geschrieben werden: src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}" , sodass fullStarUrl und nullStarUrl in der js-Datei entfernt werden können -->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="Breite: 30rpx; Höhe: 30rpx;"/>    
      </Ansicht>
    </block>
    <view class='scoreContent'>{{scoreContent}}</view><!-- Aktuellen Punktestand anzeigen -->
  </Ansicht>
 </Ansicht>
</Vorlage>

<Skript>
 Standard exportieren{
  beim Laden() {
  },
  Daten(){
   zurückkehren {
        fullStarUrl: 'Volles Sternenbild', //Volles SternenbildnullStarUrl: 'Leeres Sternenbild', //Leere Sternenbilderscore: 0, //BewertungsnotenscoreArray: [1, 2, 3, 4, 5], //Aufgeteilt in 1-5 WertungsstufenscoreText: ['1 Stern', '2 Sterne', '3 Sterne', '4 Sterne', '5 Sterne'], //BewertungslistenscoreContent: '' //Textanzeige der Bewertungen}
  },
  Methoden:{
     changeScore: Funktion(e) {
       console.log(e) //Informationen zum Touch-Ereignis der Konsole var that = this;
       var num = 0; //temporäre Zahl, bestimme dynamisch die Punktzahl, die übergeben werden soll var touchX = e.touches[0].pageX; //Hole die X-Koordinate des aktuellen Berührungspunkts var starMinX = 110; //Die X-Koordinate des ersten Sterns auf der linken Seite, angenommen der Abstand von der Seite beträgt 110, wie weit ist er von links var starWidth = 15; //Die Breite des Sternsymbols, angenommen 15 (festgelegt in der wxss-Datei „.star“)
       var starLen = 5; //Der Abstand zwischen den Sternen wird mit 5 angenommen (festgelegt in der wxss-Datei „.starLen“)
       var starMaxX = starWidth * 5 + starLen * 4+starMinX; //Zur äußersten rechten X-Koordinate des äußersten rechten Sterns muss die Breite von 5 Sternen und der Abstand zwischen 4 Sternen addiert werden, if (touchX > starMinX && touchX < starMaxX) { //Die Anfangsposition von Klick und Berührung liegt innerhalb des Bereichs, in dem sich die Sterne befinden //Verwenden Sie die Methode Math.ceil(), um die Ganzzahl des Verhältnisses der X-Koordinate der aktuellen Berührungsposition zu (Stern + Abstand zwischen den Sternen) zu erhalten und zu bestimmen, auf welchen Stern aktuell geklickt wird num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
         if (num != that.score) { //Wenn der aktuelle Score nicht dem gerade festgelegten Wert entspricht, weisen Sie den Wert zu. Da die Touchmove-Methode eine hohe Aktualisierungsrate hat, können hierdurch einige Ressourcen gespart werden that.score = num,
             dieser.ScoreInhalt = dieser.ScoreText[num - 1]
         }
       } else if (touchX < starMinX) { //Wenn die Klick- oder Touchposition links vom ersten Stern ist, stelle den Standardwert wieder her, sonst bleibt der erste Stern immer bestehen that.score = 0,
           that.scoreContent = ''
       }
     },
  }
 }
</Skript>

<style lang="less" scoped>
.starLen{
  Rand rechts: 10rpx;
  Anzeige: Inline-Block;
}

.Stern{
  Breite: 30rpx;
  Höhe: 30rpx;
}

.scoreContent{
  Rand links: 100rpx;
  Anzeige: Inline-Block;
  Farbe: #fff;
}
</Stil>