ヴァント、ミントコンポーネントなどをチェックし、期待される効果（キューブコンポーネントですが、プロジェクトにサードパーティコンポーネントライブラリを導入したくありません）は見つかりませんでしたが、実際にはモバイルアプリ開発で非常に一般的です効果。だから私は自分の考えに従ってこの効果を作りました、
効果は次のとおりです。
1.左右の列は個別にスライドできます（基本的なスタイルの効果を最初に完了する必要があります）
2.左側のタブをクリックし、右側のコンテンツを対応するコンテンツにスライドします。
3.コンテンツを右側にスライドすると、左側のタブも対応する位置にフォーカスします
コード：
デフォルトのエクスポート{
名前： ""、
コンポーネント：{
// Tabbar2
}、
データ（）{
戻る{
リスト：[「人気」、「中国スーパーリーグ」、「イングリッシュプレミアリーグ」、「ラリーガ」、「セリエA」、「ナショナルチーム」、「チャイニーズリーグ」、「ユーゴスラビア」、「オランダ語A」、「ポルトガル語A」、「フレンチリゲ1」 '、' Su Chao '、'ロシアスーパーリーグ '、'トルコスーパーリーグ '、'アメリカリーグ '、'日々 '、' Kリーグ '
curLeft：0
}、
メソッド：{
leftSelect（index）{
//左クリックは右を制御します（クリックイベントを左側のループされたボタンにバインドします）
this.curLeft = index
let num //スクロール位置を設定する
let right = document.getElementById（ 'right'）
if（index == 0）num = 605 * index-60 // 605は右側の各部分の高さ、60は画面全体の高さをカバーするヘッダーの高さ、もちろんこの部分はスライド距離をカウントしません
それ以外の場合、num = 605 * index
$（ "＃right"）。animate（{scrollTop：num}、400）;
}
}、
Mounted：function（）{
//右側をスライドさせて左側を制御する
var right = document.getElementById（ "right"）//スライドパーツにリスニングイベントを追加
right.addEventListener（ 'scroll'、（）=> {
letIndex = Math.ceil（（right.scrollTop-60）/ 605）
this.curLeft = hopeIndexは、監視されている値から現在の画面ウィンドウのコンテンツが属するインデックスを計算し、左側のインデックスに割り当てます
}、true）;
}
}、
}