bscroll 滚动位置_BScroll左右联动导航

[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 滚动时改变数据，会触发计算属性重新计算，然后根据计算属性返回的索引值来跳转对应的菜单导航