Vueは左上と右上のスライドナビゲーションを実装します

<テンプレート>
  <div class="デバッグインデックスページ">
    <div class="tab-layout" id="scroller">
      <ul v-for="(tab, idx) in tabList" :key="idx​​">
        <li
          :id="`タブ-${tab.id}`"
          クラス="タブ項目"
          @click="onClickTab(タブ)"
          :style="`背景:${tab.select ? '赤' : 'なし'}`"
        >
          {{タブ.テキスト}}
        </li>
      </ul>
    </div>
  </div>
</テンプレート>

エクスポートデフォルト{

    データ（） {
        戻る {
            タブリスト: [],
        }
    },

    作成された() {
        リスト = [
            「私の貴族たち」
            「ノーブル1」、
            「マイノーブル2」
            「ノーブル3」、
            「ノーブル4」、
            「ノーブル5」、
            「マイノーブル6」
            「マイノーブル7」
        ];

        リスト.forEach((テキスト、idx) => {
            this.tabList.push({
                文章、
                id: idx, // タブ識別子 select: idx == 0, // 選択されているかどうか index: idx // 表示されている場所 });
        });
    },

    計算: {
        curTab() {
            this.tabList.find(v => v.select) を返します。
        }
    },

    メソッド: {

        onClickTab(タブ情報) {
            curTab を this.curTab とします。
            curTab.id == tabInfo.id の場合、戻り値は次のようになります。
            {インデックス、id} = tabInfo;
            // スライド コントロール let scroller = document.getElementById("scroller");
            speed = scroller.scrollWidth / this.tabList.length; とします。
            tab = document.getElementById(`tab-${id}`);
            bWidth を document.body.clientWidth とします。
            // 右をクリックします if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
            // スライド距離 scroller.scrollLeft = (index + 2) * speed - bWidth;
            } そうでない場合、(curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // スライド距離 scroller.scrollLeft = (index - 1) * speed;
            }

            curTab.select を false に設定します。
            this.tabList[インデックス].select = true;
        }
    }
}

.debug-index-page {
    幅: 100%;
    オーバーフロー:非表示;


  .タブレイアウト{
    幅: 100%;
    オーバーフローx: スクロール;
    ディスプレイ: フレックス;

    .タブ項目{
      幅: 1rem;
      テキスト配置: 中央;
    }
  }
}