vue学习笔记-betterscroll

场景：左边有一个导航栏，右边是商品

(1)滑动右边的内容，左边的导航栏会跳到相应的位置

(2)点击左边的导航栏，右边的内容会显示相应的东西

 

使用插件Bscroll，在依赖文件package.json中添加版本，在install，run之后使用
1）import BScroll from

2)BScroll实例化的时候要接收一个DOM，此处将实例化并获取DOM的过程封装成方法,获取DOM

在created中添加初始化，在this.$nextTick(() => {初始化}) ，因为在created中DOM未渲染，添加完这个方法才渲染

左右两侧都可以产生的滚动效果

3）滚动右侧时左侧相应滚动，计算右侧不同区间高度的一个数组，然后对比当前滑动的坐标落在哪个区间，并取到这个区间的索引值，就可以知道左侧导航栏要高亮的索引值了，利用vue的class绑定令其高亮

在data中定义数组用来存储不同区间的高度

为了获取高度，给food-list定义一个class--food-list-hook，不用来编写css，专门用来获取DOM元素，没有实际的效果，只是用来被js选择的

foodList拿到了每个li，每个li是包括包括标题在内的每一类food的高度，不是单独的一种good，将_calculateHeight放在nextTick中初始化_initScroll的后面，保证其能正确计算到高度

在data中定义一个scrollY对象，用来跟踪滚动的高度 scrollY：0；在初始化betterScroll时，为右侧添加probeType，可以检测到右侧实时滚动的位置，监听scroll，将其实时滚动的位置暴露出来

4）拿到滚动的高度和内容区的固定高度之后， 查看scrollY落在哪个区间，并返回那个区间的索引（！height2是测试最后一个区间的）其中，>= 向下的是一个闭区间，这样第一个就会高亮了

拿到index之后，回到左侧的menu区，当我们遍历menu的时候，如果$index等于我们计算得到的currentIndex时，就为当前的li添加一个current样式

5）点击左侧右侧滚动
在左侧菜单栏添加点击事件selectMenu， @click = "selectMenu($index, $event)"，将index传进去，就可以知道点选的是哪个区域，然后利用原生DOM操作将高度滚动到相应的位置

点击左侧菜单栏的时候没有反应，因为BScroll默认阻止点击事件，所以在 _initScroll()中获取DOM对象时添加click: true,并解决PC端双点击问题，event是点击时的event