// 通过 方法 计算foods内部每一个块的高度,组成一个数组listHeight。
// 每个li 定义一个类food-list-hook 通过获取该类 来计算 每一块的高度 存到数组listHeight里
_calculateHeight (){
// 获取 li 通过food-list-hook
let foodList=this.$refs.foodsWrapper.querySelectorAll(".food-list-hook");
let height=0;// 初始化高度
this.listHeight.push(height) // 把第一个高度存入数组
//通过循环foodList下的dom结构，将每一个li的高度依次送入数组
for(let i = 0 ,l = foodList.length ; i < l ; i++){
let item=foodList[i]; //每一个item都是刚才获取的food的每一个dom
height += item.clientHeight; //获取每一个foods内部块的高度
this.listHeight.push(height) // 将获取的值存放到数组里
} }
2.我们获取到区间高度数组后，我们要实时获取到右侧的y值，和左侧的索引值做一个对比，定义一个scrollY变量用来存放实时获取的y值。bs插件为我们提供了一个实时获取y值的方法，我们在初始化this.foodScroll的时候加一个·属性probeType: 3，其作用就是实时获取y值，相当于探针的作用。
goods: [],// goods json 数组
listHeight: [],// 存放 foods 内部的每一块的高度
scrollY:0
this.foodScroll=new BScroll(this.$refs.foodsWrapper,{
click:true,
//探针作用，实时监测滚动位置
probeType: 3
});
3.我们再添加一个方法this.foodScroll.on(‘scroll’,(pos) => {}),作用是实时滚动的时候把获取到的位置给暴露出来。代码如下。
//结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标，当滚动时能实时暴露出scroll
this.foodScroll.on("scroll",(pos) =>{ // 回调函数
//scrollY接收变量
this.scrollY=Math.abs(Math.round(pos.y)) //滚动坐标会出现负的,并且是小数,所以需要处理一下，实时取得scrollY
// console.log(pos.y)
})
4.定义一个计算属性computed，获取到food滚动区域对应的menu区域的子块的索引i值，从而定位到左侧边栏的位置。
computed:{
currentIndex (){ //计算到达哪个区域的区间的时候的对应的索引值
// 利用 listHeight 存放 每一块 对应的高度
for (let i=0,l=this.listHeight.length; i<l ; i++){
let menuHeight_fir = this.listHeight[i] // 当前menu 子块区域的 高度
let menuHeight_sec = this.listHeight[i + 1] // 下一个menu 子块区域的 高度
// 当滑到底部时，menuHeight_sec 为 underfined,
// 需要确定滑到俩个高度区间
if( !menuHeight_sec || (this.scrollY > menuHeight_fir && this.scrollY < menuHeight_sec) ){
