实现功能：

点击左侧商品分类，右侧商品滑动到对应的位置
右侧商品列表滑动，左侧对应高亮

效果思路：

获取每一个ul的高度，并生成一个数组tops
获取当前的Y坐标scrollY
根据当前的Y坐标在ul高度的那个区间确定高亮

实施

给右侧列表滑动监听，应该放在mounted钩子内并加上this.$nextTick(）
定义_initScroll方法来确定当前的scrollY值

（1）右侧列表绑定事件监听

             ``` this.foodsScroll = new BScroll(".goodsWrapper", {
                      probeType: 2, 
                      click: true,
               });
              ```

注！

    probeType
    0:不监听
    1：会非实时（屏幕滑动超过一定时间后）派发
    2：会在屏幕滑动的过程中实时的派发 scroll 事件
    3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
    
     click: true代表可以触发原生的click事件
     使用this.foodsScroll接收事件监听是为了后面点击左边的分类触发scrollTo(）方法
     若左侧分类超出范围有滚动条则还需要对左侧进行监听并对应的处理

（2）绑定滑动事件监听，为了实时获取当前的scrollY

        ``` this.foodsScroll.on("scroll", (prp) => {
                this.scrollY
                但是= prp.y;
              });
        ```

注！

   回调函数中的传参是一个对象有当前的x和y左边的位置，然后赋值给data中的scrollY
   但是probeType: 2不会监听到惯性滑动，需要scrollEnd事件来解决
   或者把probeType: 2 改为3也能同样达到效果，但是会导致事件触发过于频繁影响性能

（3）最后到达的scrollY的位置

        ```this.foodsScroll.on("scrollEnd", (prp) => {
                this.scrollY = prp.y;
              });
        ```

3.定义_initTops方法来确定当前的top值

       //第一个固定为0，在最上面
      let top = 0;
      tops.push(top);
      const ulTags = this.$refs.context.children;
      //伪数组转换成真实数组
      Array.prototype.slice.call(ulTags).forEach((ul) => {
        //通过ul.clientHeight获取的是当前ul的高度，我们需要的是距离最顶端的高度，这里获取的是一个负值
        top += ul.clientHeight;
        tops.push(top);
      });
      this.tops = tops;
    }

4.定义 MenuScrollTo方法来给左侧的分类触发点击事件来控制右侧滑动到对应的位置

``` this.foodsScroll.scrollTo(0, -this.tops[index], 1000);
```

利用better-scroll完成左侧商品分类、右侧全商品列表

实现功能：

效果思路：

实施