Vueはボールのスライディングクロス効果を実現します

<テンプレート>
  <div class="about">
    <div class="box">
      <!-- デフォルト行 -->
      <div class="Line"></div>
      <!-- 青い線 -->
      <div class="スライダーライン" ref="スライダーライン"></div>
      <!-- 左側の小さなボール -->
      <div class="ball" @touchstart.prevent="fnstart"></div>
      <!-- 右ボール-->
      <div class="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- 上記の数字 -->
      <div class="num" ref="num">{{ num }}</div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      番号: 0,
    };
  },
  メソッド: {
    fnstart(ev) {
      //ボール this.oDiv = ev.target;
      // pagx: マウスのクリック位置からページの左端までの距離 offsetLeft 現在の要素の左端から最大ボックスの左端までの距離 this.pageX = ev.changedTouches[0].pageX - this.oDiv.offsetLeft;
 
      document.ontouchmove = this.FnMove;
      document.ontouchend = this.FnEnd;
      //親要素の幅 this.parent = ev.target.parentNode.offsetWidth;
      // ボールの幅を減算します this.Width = this.parent - ev.target.offsetWidth;
      //親要素を取得します。this.parents = ev.target.parentNode;
      //子要素を取得します。this.child = this.parents.children;
 
      // 右側のボールを取得します this.Right = this.parents.children[0];
      // 左側のボール this.Left = this.parents.children[1];
    },
    FnMove(ev) {
      // ボールが要素の左端からスライドする距離を減算して、ブラウザの端を計算します。this.X = ev.changedTouches[0].pageX - this.pageX;
      // コンソールログ(this.X, 1010101);
 
      // ボールがゼロで外に出られないかどうかを確認します if (this.X <= 0) {
        this.X = 0;
      }
      // ボールが外に出ないように、これより大きいか等しいかをチェックします。if (this.X > this.Width) {
        this.X = this.Width;
      }
      // 左側のボールをスライドさせると、それに応じて線の色が変わります // 上記の値もそれに応じて変化し、100 の部分に分割されます this.xnum = this.X / 3.7;
      // 整数を取得 this.num = parseInt(this.xnum);
      this.$refs["num"].style.left = this.X + 6 + "px";
 
 
      // ボールが互いに影響を及ぼさずに交差するようにします // 左右を動的に監視します for (var i = 0; i < this.child.length; i++) {
        if (this.child[i].classList.contains("ball")) {
          // 合計 5 つの要素から 3 を引いたものが青い線の長さです
          Len = this.child.length - 3 とします。
          (i == 長さ) の場合 {
            // 左のボールの絶対値から右のボールを引いた値が線の幅です。 this.dis = Math.abs( this.child[i].offsetLeft - this.child[i + 1].offsetLeft );
            //ボールの幅 this.child[1].style.width = this.dis + "px";
 
            // 左のボールの値から右のボールの値を引いた値が 0 未満の場合、青い線の左側が左のボールの offsetLeft 値になります if (this.child[i].offsetLeft - this.child[i + 1].offsetLeft < 0) {
              this.child[1].style.left = this.child[i].offsetLeft + "px";
            } それ以外 {
              // それ以外の場合は、右側のボールの offsetLeft 値です。this.child[1].style.left = this.child[i + 1].offsetLeft + "px";
            }
          }
        }
      }
 
 
      this.oDiv.style.left = this.X + "px";
    },
    FnEnd() {
      document.ontouchmove = null;
      document.ontouchend = null;
    },
  },
};
</スクリプト>

<style lang="less" スコープ>
。箱 {
  位置: 相対的;
  幅: 400ピクセル;
  高さ: 30px;
  背景色: rgb(240, 16, 83);
  上: 50px;
  マージン: 自動;
  。ボール {
    位置: 絶対;
    幅: 30ピクセル;
    高さ: 30px;
    背景色: ピンク;
    境界線の半径: 50%;
    zインデックス: 2;
  }
  .ball.ac {
    右: 0;
    背景色: 紫;
  }
  。ライン {
    位置: 絶対;
    上: 14px;
    幅: 400ピクセル;
    高さ: 2px;
    行の高さ: 30px;
    背景: #ccc;
  }
  .スライダーライン{
    位置: 絶対;
    上: 14px;
    幅: 400ピクセル;
    高さ: 2px;
    行の高さ: 30px;
    背景色: 青;
  }
  .nu​​m {
    位置: 絶対;
    上: -19px;
    左: 9px;
  }
}
</スタイル>