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

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

<div class="menu-wrapper" ref="menuWrapper">
<div class="foods-wrapper" ref="foodsWrapper">

methods: {
   _initScroll() {
     //v-el(this.$els.foodWrapper)获取DOM对象，json对象
     this.menuScroll = new BScroll(this.$refs.menuWrapper, {
       click: true //阻止默认，允许点击
     });
     this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
       click: true,
       probeType: 3 //BScroll滚动时，能实时告诉我们滚动的位置，类似探针的效果
     });
     //foodsScroll监听事件,在scroll滚动时能见位置实时暴露出来
    this.foodsScroll.on('scroll', (pos) => {
      this.scrollY = Math.abs(Math.round(pos.y)); //取正值
    });
   }

在created中添加初始化，在this.$nextTick(() => {初始化})

 created() {
   this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

    //请求的ajex地址,成功的回调，拿到一个response
    this.$http.get('/api/goods').then((response) => {
      //response是一个属性，将其转化为json对象
      response = response.body;
      //console.log(response);
      if (response.errno === ERR_OK) {
        // 数据在data字段中,将goods对象传给header组件，通过:goods
        this.goods = response.data;
//        console.log(this.goods);
        //初始化betterScroll的时候，DOM的更新时异步的,所以我们在这虽然改变了数据，但是DOM并没有变化，计算不到正确的高度
        this.$nextTick(() => {
           //调用scroll函数，实现滚动
          this._initScroll();
          //拿到数据以后计算高度
          this._calculateHeight();
        }); 
      }
    });
 }

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

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

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

data() {
  return {
    goods: [],
    listHeight: [] //存储区块的高度
  };
}

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

<div class="foods-wrapper" ref="foodsWrapper">
     <ul>
       <li v-for="item in goods" :key="item.id" class="food-list food-list-hook">

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

   _calculateHeight() {
     //food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块
    let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
    let height = 0;
    this.listHeight.push(height); //listHeight是一个递增的区间数组，是每个专区高度的累加
    for (let i = 0; i < foodList.length; i++) {
      let item = foodList[i];
      height += item.clientHeight;
      this.listHeight.push(height);
    }
   }

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

this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
       click: true,
       probeType: 3 //BScroll滚动时，能实时告诉我们滚动的位置，类似探针的效果
     });
     //foodsScroll监听事件,在scroll滚动时能见位置实时暴露出来
    this.foodsScroll.on('scroll', (pos) => {
      this.scrollY = Math.abs(Math.round(pos.y)); //本身是个负值，取正值
    })

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

computed: {
  currentIndex() { //currentIndex对应菜单栏的下标
    for (let i = 0; i < this.listHeight.length; i++) { //不要忘了加this引用
      let height1 = this.listHeight[i];
      let height2 = this.listHeight[i + 1];
      //获得了一个区间的上下范围，判断scrollY落到这个区间，!height2是判断最后一个区间
      //避免i溢出，>= 向下的是一个闭区间，这样第一个就会高亮了
      if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
        return i; //映射到第5行menu的变化
      }
    }
    return 0;
  

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

<!-- 如果index等于currentIndex,就为这个li添加一个current类，改变左侧导航栏的背景颜色-->
       <li v-for="(item,index) in goods" :key="item.id" class="menu-item" :class="{'current': currentIndex === index}" 
       @click = "selectMenu($index, $event)"> <!--  click所传递的事件-->

        &.current
          position relative
          margin-top -1px
          background #fff
          font-weight 700
          z-index 10
          .text
            border-none()

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

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

    selectMenu (index, event) {
		 if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
			return;
		 }
		let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
		let ref = foodList[index]; //取到index对应的DOM
		this.foodsScroll.scrollToElement(ref, 300);//滚动到DOM所在位置
		//console.log(index);
	  }