查了諸如vant，mint組件上並沒有找到期望的這種效果(cube組件上有，但項目中實在不想再引入一個第三方的組件庫了)，但實際上在移動端app開發中很常見的一個效果。於是按照自己的思路將這個效果做了出來，
效果是：
1.左右兩欄可以分別獨立滑動，（首先要完成這個基礎樣式效果）
2.點擊左邊選項卡，右邊內容滑動到相應內容，
3.而且滑動右邊內容時，左邊的選項卡也跟着聚焦到對應位置
代碼：
export default{
name: "",
components:{
// Tabbar2
},
data(){
return{
list:['熱門','中超','英超','西甲','意甲','國家隊','中甲','南斯拉夫','荷甲','葡甲','法甲','蘇超','俄超','土超','美職聯','日至賽','K聯賽'],
curLeft:0
}，
methods：{
leftSelect(index){
//左邊點擊控制右邊(給左邊循環出來的按鈕綁定點擊事件)
this.curLeft = index
let num //設置scroll的位置
let right = document.getElementById('right')
if(index==0) num = 605*index-60 // 605是右邊每一部分的高度，60是將整個屏幕高度遮起來header的高度，這一部分當然不計入滑動的距離啦，
else num = 605*index
$("#right").animate({ scrollTop: num }, 400);
}
},
mounted:function(){
//右邊滑動控制左邊
var right = document.getElementById("right") //給滑動的部分添加監聽事件
right.addEventListener('scroll', () => {
let hopeIndex = Math.ceil((right.scrollTop-60)/605)
this.curLeft = hopeIndex 將監聽得到的數值計算出來當前屏幕窗口的內容應該屬於哪個index，並賦值給左邊的index
}, true);
}
},
}