Uniapp realizes sliding scoring effect

<template>
 <view>
  <view class="flex" style="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- Traverse the score list-->
      <!-- Set the touch event and click event to the same method, otherwise the event will not be triggered if you click but do not slide. -->
      <view class='starLen' @touchmove='changeScore' @tap='changeScore' >
        <!-- Use the ternary operator to dynamically change which image is displayed, score is the score in js, index is the subscript of scoreArray-->
        <!-- The src part can be written like this: src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}" , so that fullStarUrl and nullStarUrl can be removed in the js file -->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="width: 30rpx; height: 30rpx;"/>    
      </view>
    </block>
    <view class='scoreContent'>{{scoreContent}}</view><!-- Display current score -->
  </view>
 </view>
</template>

<script>
 export default{
  onLoad() {
  },
  data(){
   return {
        fullStarUrl: 'Full Star Picture', //Full Star PicturenullStarUrl: 'Empty Star Picture', //Empty Star Picturescore: 0, //Evaluation scorescoreArray: [1, 2, 3, 4, 5], //Divided into 1-5 rating levelsscoreText: ['1 star', '2 stars', '3 stars', '4 stars', '5 stars'], //Rating listscoreContent: '' //Text display of ratings}
  },
  methods:{
     changeScore: function(e) {
       console.log(e) //Console touch event information var that = this;
       var num = 0; //temporary number, dynamically determine the score to be passed in var touchX = e.touches[0].pageX; //get the X coordinate of the current touch point var starMinX = 110; //the X coordinate of the first star on the left, assuming the distance from the page is 110, how far is it from the left var starWidth = 15; //the width of the star icon, assuming 15 (set in the wxss file ".star")
       var starLen = 5; //The distance between stars is assumed to be 5 (set in the wxss file ".starLen")
       var starMaxX = starWidth * 5 + starLen * 4+starMinX; //The rightmost X coordinate of the rightmost star needs to be added with the width of 5 stars and the distance between 4 stars if (touchX > starMinX && touchX < starMaxX) { //The initial position of the click and touch is within the space where the stars are located //Use the Math.ceil() method to obtain the integer of the ratio of the X coordinate of the current touch position to (star + distance between stars), and determine which star is currently clicked num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
         if (num != that.score) { //If the current score is not equal to the value just set, assign the value, because the touchmove method has a high refresh rate, this can save some resources that.score = num,
             that.scoreContent = that.scoreText[num - 1]
         }
       } else if (touchX < starMinX) { //If the click or touch position is to the left of the first star, restore the default value, otherwise the first star will always exist that.score = 0,
           that.scoreContent = ''
       }
     },
  }
 }
</script>

<style lang="less" scoped>
.starLen{
  margin-right: 10rpx;
  display: inline-block;
}

.star{
  width:30rpx;
  height:30rpx;
}

.scoreContent{
  margin-left: 100rpx;
  display: inline-block;
  color: #fff;
}
</style>