Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています

<セクションクラス="テーマリスト">
  <div class="fixed-nav" ref="fixednav">
    <div class="fixed-nav-content">
      <p
        v-for="(item, index) テーマ内"
        :key="インデックス"
        :class="['タブタイトル', アクティブID === インデックス && 'タブの選択']"
        @click="changeTab(インデックス、$event)"
      >
        {{ アイテム }}
      </p>
    </div>
  </div>
</セクション>

テーマ: ['CSDN ブログ'、'ブログガーデン'、'大学受験がんばれ'、'高校受験がんばれ'、'リトルジョイ'、'70周年']、
アクティブID: 0

.テーマリスト{
  上マージン: 12px;
}
.固定ナビゲーション{
  オーバーフローx: スクロール;
  -webkit-オーバーフロースクロール: タッチ;
}
.fixed-nav-content {
  ディスプレイ: フレックス;
}
.タブタイトル{
  パディング: 0 13px;
  右マージン: 12px;
  色: #141414;
  境界線の半径: 13px;
  フォントサイズ: 12px;
  フレックス収縮: 0;
  高さ: 0.52rem;
  行の高さ: 0.52rem;
}

changeTab(id, イベント) {
  // 選択されたものが現在アクティブなものと異なる場合 if (id !== this.activeId) {
    this.activeId = id;
    // 現在のボタンの位置を計算して、移動する必要があるかどうかを確認します const spanLeft = event.clientX; // 現在クリックされている要素の左の距離 const divBox = document.querySelector(".select-tab").clientWidth / 2; // クリックされた要素の幅の半分 const totalWidths = document.body.clientWidth; // 画面全体の幅 const widths = totalWidths / 2; // 画面の幅の半分 const spanRight = totalWidths - spanLeft; // 要素の右の距離 const scrollBox = document.querySelector(".fixed-nav"); // 最も外側の要素を取得します const scrollL = scrollBox.scrollLeft; // スクロールバーがスクロールする距離 // 要素の左または右の距離が 100 未満の場合にスライドします if (spanRight < 100 || spanLeft < 100) {
      scrollBox.scrollLeft = scrollL + (spanLeft - 幅) + divBox;
    }
  }
}

/*水平スクロールバーと垂直スクロールバーのサイズに応じて、スクロールバーの高さと幅、および背景の高さと幅を定義します*/
::-webkit-スクロールバー{
  幅: 0.01rem;
  不透明度: 0;
  表示: なし;
}
/*スクロールバートラックの内側の影と丸い角を定義します*/
::-webkit-スクロールバートラック{
  背景色: #fff;
  不透明度: 0;
}
/*スライダーの内側の影と丸い角を定義します*/
::-webkit-スクロールバー-サムネイル {
  幅: 0.01rem;
  境界線の半径: 0.01rem;
  不透明度: 0;
}