实现目的两个：
1 手指点击左边菜单栏，右边食物栏会联动到菜单栏下面的内容。
2 手指滑动右边食物栏，左边菜单栏会随着右侧的滚动而相应出现active样式。
我自己用原生写了好几个，问题很多，有的卡顿，有的每次都从头开始走，很烦人。知道我引用了插件才算顺畅。
插件是better-scroll npm一下，import一下开始操作。
先实现目的1；
目的1 很简单
（1）在左侧目标li绑定click事件。触发函数move
（2）初始化两个better-scorll对象，一个food（右边的），一个menu（左边的），别忘记给他们设置click：true。
在move函数里执行 food.scrollToElement(le，time) 这个方法简直逆天：能food里的目标元素el在time毫秒内滚动到最顶部。el可以通过move（index）来获取；
此时点击右侧，左侧就可以联动了。
实现目的2 比实现目的1较复杂：
（1）定义一个数组，记录每个food中list的高度
（如果没有border情况下，clientHeight或者offsetHeight都可以，有border请用offsetHeight，但是style.height不可以，因为只有行间样式style才能点到）
真实的宽度在data里肯定获取不到，因为涉及到dom创建，所以在created钩子里的nextTick（）回调函数里获取；（大家都知道created钩子执行时DOM 其实并未进行任何渲染，获取不到 offsetHeight）
mounted回调里是无法直接通过this.$refs获取到用ref命名的子组件的，只有nextTick才能访问到，我也尝试过在mounted里获取offsetHeight，没有获取到。（）
scroll事件实时监听滚动位置，并且将位置赋给scrollY，scrollY发生变化引起了函数再次执行并返回index。
接下来就简单了，新index的变化引起绑定class属性的变化添加active类名的变化。
