本文例項為大家分享了uniapp實現滑動評分的具體程式碼，供大家參考，具體內容如下

uniapp開發、 滑動評分、點選評分

<template>
 <view>
  <view class="flex" style="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍歷評分列表 -->
      <!-- 設定觸控事件和點選事件為同一個方法,否則點選卻不滑動的話,不觸發事件 -->
      <view class='starLen' @touchmove='changeScore'  @tawww.cppcns.com
 
p='changeScore' >
        <!-- 使用三目運算子來動態變化顯示的是哪張圖片,score是中的分數,index是scoreArray的下標 -->
        <!-- src部分可以這樣寫 src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}"  ，這樣可以在js檔案把fullStarUrl和nullStarUrl去掉 -www.cppcns.com->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="width: 30rpx; height: 30rpx;"/>    
      </view>
    </block>
    <view class='scoreContent'>{{scoreContent}}</view><!-- 顯示當前評分 -->
  </view>
 </view>
</template>

<script>
 export default{
  onLoOeybXmf
 
ad() {
  },data(){
   return{
        fullStarUrl: '滿星的圖片',//滿星圖片
        nullStarUrl: '空星圖片',//空星圖片
        score: 0,//評價分數
        scoreArray: [1,2,3,4,5],//分為1-5個評分層次
        scoreText: ['1星','2星','3星','4星','5星'],//評分列表
        scoreContent: '' //文字顯示評分情況
   }
  },methods:{
     changeScore: function(e) {
       console.log(e)//控制檯觸控事件資訊
       var that = this;
       var num = 0;//臨時數字,動態確定要傳入的分數
       var touchX = e.touches[0].pageX;//獲取當前觸控點X座標
       var starMinX = 110;//最左邊第一顆星的X座標,假設距離頁面距離為110,距離左邊的距離是多少
       var starWidth = 15;//星星圖示的寬度,假設15(已在wxss檔案中設定".star")
       var starLen = 5;//星星之間的距離假設為5(已在wxss檔案中設定".starLen")
       var starMaxX = starWidth * 5 + starLen * 4+starMinX;//最右側星星最右側的X座標,需要加上5個星星的寬度和4個星星間距
       if (touchX > starMinX && touchX < starMaxX) {//點選及觸控的初始位置在星星所在空間之內
       //使用Math.ceil()方法取得當前觸控位置X座標相對於(星星+星星間距)之比的整數,確定當前點選的是第幾個星星
         num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
         if (num != that.score) {//如果當前得分不等於剛設定的值,才賦值,因為touchmove方法重新整理率很高,這樣做可以節省點資源
             that.score = num,that.scoreContent=that.scoreText[num - 1]
         }
       } else if (touchX < starMinX) {//如果點選或觸控位置在第一顆星星左邊,則恢復預設值,否則第一顆星星會一直存在
           that.score = 0,that.scoreContent =''
       }
     },}
 }
</script>

<style lang="less" scoped>
.starLen{
  margin-right: 10rpx;
  dihttp://www.cppcns.com
 
splay: inline-block;
}

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

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

程式碼中的距離都是按照10px/2，轉為5rpx，（如果使用其他單位，請自行轉換）
var starMinX = 110，最左邊的星星離螢幕左邊的距離
var starWidth = 15 ，為星星的寬度
var starLen = 5，為兩個www.cppcns.com星星之間相隔的距離。
示例效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。