Uniapp realizes sliding scoring effect

This article shares the specific code of uniapp to implement sliding scoring for your reference. The specific content is as follows

uniapp development, sliding rating, clicking rating

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

The distances in the code are all converted to 5rpx based on 10px/2. (If you use other units, please convert them yourself)
var starMinX = 110, the distance of the leftmost star from the left side of the screen
var starWidth = 15, the width of the star
var starLen = 5, which is the distance between two stars.
Example results:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: