使用
初始化需要滚动的dom结构
借助ref属性用来绑定某个dom元素，或者来说来绑定某个组件，然后在函数内用this.$refs.menuwrapper获取到dom。
说明：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:
<div class="menu-wrapper" ref='menuWrapper'> </div>
<div class="foods-wrapper" ref="foodsWrapper"></div>在ajax内执行_initScroll() 函数
在此之前我们要做一些准备和 注意事项
(1) dom结构完全加载完再调用_initScroll()方法才会生效
(2) 因为要监听内容区域的高度，所以初始化应在created过程中去监听dom结构是否完全加载，这里是在$nextTick对象中进行触发检测
ES6语法格式： this.$nextTick(() => {})
created (){ // 在实例创建完成后被立即调用 $el 属性目前不可见。
axios.get('static/data.json').then((result) => {
this.goods=result.data.goods
//dom结构加载结束
this.$nextTick(() => {
this._initScroll(); // 初始化scroll
})
})
}
(3) 在methods方法里面定义一个_initScroll的函数，主要用来对左右两侧dom结构进行初始化
methods:{
// 用来对左右两侧dom结构进行初始化
_initScroll (){
// 实例化 better-scroll 插件，传入要滚动的DOM 对象
this.meunScroll=new BScroll(this.$refs.menuWrapper,{
click:true
});
this.foodScroll=new BScroll(this.$refs.foodsWrapper,{
click:true
}); }
}
说明：vue中更改数据，DOM会跟着做映射，但vue更新DOM是异步的，用 $nextTick ()来确保Dom变化后能调用到_initScroll()方法。调用_initScroll()方法能计算内层ul的高度，当内层ul的高度大于外层wrapper的高度时，可以实现滚动。
此时俩侧可以分别滚动了！
(4) 实现左右联动
原理：我们计算出右侧实时变化的y值，落到哪一个区间，我们就显示那一个区间。首先我们要计算整体区间的一个高度，然后分别计算第一个区间的高度，第二个区间的高度，以此类推。然后将区间数存入一个定义好的数组。当我们在滚动的时候实时拿到y轴的高度，然后对比在哪一个区间，这样我们就会得到一个区间的索引值去对应左侧的菜品类别，最后我们用一个vue的class去绑定高亮文本。
1.定义一个方法在 _initScroll 下面，作为计算高度的方法叫做_calculateHeight () ，再定义一个listHeight:[]数组，存放获取到的每一块foods类的高度。然后通过给每个li 定义类名来供js 选择 从而计算出高度存放到listHeight数组里。
