這里的坑還是蠻多的，花了一個多小時，才理清楚。
做一下筆記，以便于復習。
首先呢，需要讓左右的布局都可以滾動，這里使用了betterScroll
npm i better-scrollimport BScroll from 'better-scroll'methods: { _initScroll () { this.menuScroll = new BScroll((this.$refs.menu), { click: true 因為betterscroll默認會阻止點擊事件。這里要設置一下 }) this.foodScroll = new BScroll((this.$refs.good), { probeType: 3 用來獲取滾動的距離 }) this.foodScroll.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y)) }) },重點：
created () { this.$ajax.get('/api/data.json').then((res) => { this.goods = res.data.goods this.$nextTick(() => { this._initScroll() this.getGoodsHeight() }) }) },這里的代碼一定要在獲取數據里面寫nextTick（）回調里面寫代碼，因為需要等待數據萬泉加載再去初始化scroll和獲取右邊每一個盒子的高度。
說道高度，高度如何獲取呢？
getGoodsHeight () { let goodEle = this.$refs.good let height = 0 this.listHeight.push(height) let foodList = goodEle.getElementsByClassName('goodsItemHook') for (let i = 0; i < foodList.length; i++) { let item = foodList[i] height += item.clientHeight this.listHeight.push(height) } },這里是獲取到每一個盒子的clientHeight的高度進行疊加，在push到一個數組里面。
this.foodScroll.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y)) })獲取滾動的值，賦值給scrollY。
然后根據scrollY 和listHeight的高度區間做對比，拿到index：
currentIndex () { for (let i = 0; i < this.listHeight.length; i++) { let height1 = this.listHeight[i] let height2 = this.listHeight[i + 1] if (!height2 || (this.scrollY < height2 && this.scrollY >= height1)) { return i } } }這時候滾動就能獲取index的值了，然后給左邊的元素去添加active的樣式就方便了。
:class="{'active': currentIndex == index}" 最后一步是如何實現點擊的時候去讓右邊的滾動到指定的位置。
handleGoodsItem (index) { let goodEle = this.$refs.good let foodList = goodEle.getElementsByClassName('goodsItemHook') let el = foodList[index] this.foodScroll.scrollToElement(el, 300) }這里調用了scroll的方法：scrollToElement。
總結
以上所述是小編給大家介紹的vue中實現左右聯動的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
