<template>
 <view>
  <view class="flex" style="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍歷評(píng)分列表 -->
      <!-- 設(shè)置觸摸事件和點(diǎn)擊事件為同一個(gè)方法,否則點(diǎn)擊卻不滑動(dòng)的話,不觸發(fā)事件 -->
      <view class='starLen' @touchmove='changeScore'  @tap='changeScore' >
        <!-- 使用三目運(yùn)算符來動(dòng)態(tài)變化顯示的是哪張圖片,score是js中的分?jǐn)?shù),index是scoreArray的下標(biāo) -->
        <!-- src部分可以這樣寫 src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}"  ，這樣可以在js文件把fullStarUrl和nullStarUrl去掉 -->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="width: 30rpx; height: 30rpx;"/>    
      </view>
    </block>
    <view class='scoreContent'>{{scoreContent}}</view><!-- 顯示當(dāng)前評(píng)分 -->
  </view>
 </view>
</template>

<script>
 export default{
  onLoad() {
  },
  data(){
   return{
        fullStarUrl: '滿星的圖片', //滿星圖片
        nullStarUrl: '空星圖片', //空星圖片
        score: 0, //評(píng)價(jià)分?jǐn)?shù)
        scoreArray: [1, 2, 3, 4, 5], //分為1-5個(gè)評(píng)分層次
        scoreText: ['1星', '2星', '3星', '4星', '5星'], //評(píng)分列表
        scoreContent: '' //文字顯示評(píng)分情況
   }
  },
  methods:{
     changeScore: function(e) {
       console.log(e)//控制臺(tái)觸摸事件信息
       var that = this;
       var num = 0;//臨時(shí)數(shù)字,動(dòng)態(tài)確定要傳入的分?jǐn)?shù)
       var touchX = e.touches[0].pageX;//獲取當(dāng)前觸摸點(diǎn)X坐標(biāo)
       var starMinX = 110;//最左邊第一顆星的X坐標(biāo),假設(shè)距離頁面距離為110,距離左邊的距離是多少
       var starWidth = 15;//星星圖標(biāo)的寬度,假設(shè)15(已在wxss文件中設(shè)置".star")
       var starLen = 5;//星星之間的距離假設(shè)為5(已在wxss文件中設(shè)置".starLen")
       var starMaxX = starWidth * 5 + starLen * 4+starMinX;//最右側(cè)星星最右側(cè)的X坐標(biāo),需要加上5個(gè)星星的寬度和4個(gè)星星間距
       if (touchX > starMinX && touchX < starMaxX) {//點(diǎn)擊及觸摸的初始位置在星星所在空間之內(nèi)
       //使用Math.ceil()方法取得當(dāng)前觸摸位置X坐標(biāo)相對(duì)于(星星+星星間距)之比的整數(shù),確定當(dāng)前點(diǎn)擊的是第幾個(gè)星星
         num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
         if (num != that.score) {//如果當(dāng)前得分不等于剛設(shè)置的值,才賦值,因?yàn)閠ouchmove方法刷新率很高,這樣做可以節(jié)省點(diǎn)資源
             that.score = num,
             that.scoreContent=that.scoreText[num - 1]
         }
       } else if (touchX < starMinX) {//如果點(diǎn)擊或觸摸位置在第一顆星星左邊,則恢復(fù)默認(rèn)值,否則第一顆星星會(huì)一直存在
           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>