[TOC] #### BScroll 制作左右聯動導航 1. 圖例  2. 需求： * [ ] 點擊左側菜單 右側滾動到對應位置 * [ ] 滾動右側菜單 左側跟隨聯動 3. 實現步驟 * [ ] 監聽右側商品列表滾動Y坐標 scrollY = 0 * [ ] 求出右邊商品列表累加的所有高度，存放在一個數組中 goodsList = [] * [ ] 利用計算屬性，計算出 scrollY 定位在 goodsList 數組中的區間值 >[danger] 每當監聽到scrollY 值改變，計算屬性會重新計算，返回最新區間值 * [ ] 公式： ~~~ computed: { ...mapState({ goodsData: state => state.goodsData }), currentIndex() { return this.listHeight.findIndex((item, index) => { return !this.listHeight[index+1] || (this.scrollY >= item && this.scrollY < this.listHeight[index+1]) }) } }, ~~~ * [ ] 點擊左側按鈕，右側商品列表滾動到對應位置 核心算法： ~~~ scrollTo(index) { const goodsListEl = Array.from(this.$refs.goodsList.querySelectorAll('li')) this.listScroll.scrollToElement(goodsListEl[index], 300) } ~~~ * [ ] 右側滾動，左側聯動 思考： 要觸發左側菜單導航聯動，需要在滾動左側菜單時，拿到對應索引，然后用scrollToElement 跳轉到對應的位置 核心算法： ~~~ // 監聽滾動事件 this.listScroll.on('scroll', (pos) => { const posY = Math.round( Math.abs(pos.y) ) this.scrollY = posY this.scrollMenu(this.currentIndex); }) ~~~ ~~~ scrollMenu(index) { const menuList = Array.from(this.$refs.goodsMenu.querySelectorAll('li')); this.menuScroll.scrollToElement(menuList[index], 300, false, -320) } ~~~ >[danger] 注意： this.scrollY 滾動時改變數據，會觸發計算屬性重新計算，然后根據計算屬性返回的索引值來跳轉對應的菜單導航