Uniappがスライディングスコアリング効果を実現

<テンプレート>
 <表示>
  <view class="flex" style="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- スコアリストを走査します-->
      <!-- タッチ イベントとクリック イベントを同じ方法に設定します。そうしないと、クリックしてもスライドしない場合にイベントがトリガーされません。 -->
      <view class='starLen' @touchmove='changeScore' @tap='changeScore' >
        <!-- 三項演算子を使用して、表示される画像を動的に変更します。score は js 内のスコア、index は scoreArray の添え字です -->
        <!-- src 部分は次のように記述できます: src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}" 。これにより、fullStarUrl と nullStarUrl を js ファイルから削除できます -->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="width: 30rpx; height: 30rpx;"/>    
      </ビュー>
    </ブロック>
    <view class='scoreContent'>{{scoreContent}}</view><!-- 現在のスコアを表示 -->
  </ビュー>
 </ビュー>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  オンロード() {
  },
  データ（）{
   戻る {
        fullStarUrl: 'Full Star Picture', //Full Star PicturenullStarUrl: 'Empty Star Picture', //Empty Star Picturescore: 0, //評価スコアscoreArray: [1, 2, 3, 4, 5], //1～5 の評価レベルに分かれていますscoreText: ['1 つ星', '2 つ星', '3 つ星', '4 つ星', '5 つ星'], //評価リストscoreContent: '' //評価のテキスト表示}
  },
  方法:{
     スコア変更: 関数(e) {
       console.log(e) //コンソールタッチイベント情報 var that = this;
       var num = 0; // 一時的な数値。渡されるスコアを動的に決定します。var touchX = e.touches[0].pageX; // 現在のタッチ ポイントの X 座標を取得します。var starMinX = 110; // ページからの距離が 110 であると仮定した場合の、左側の最初の星の X 座標。左からの距離はどれくらいですか。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 = ''
       }
     },
  }
 }
</スクリプト>

<style lang="less" スコープ>
.starLen{
  右マージン: 10rpx;
  表示: インラインブロック;
}

。星{
  幅:30rpx;
  高さ:30rpx;
}

.スコアコンテンツ{
  左マージン: 100rpx;
  表示: インラインブロック;
  色: #fff;
}
</スタイル>