JS部分：数据部分：data(){return{//存放右边的foodWrapper容器其中，每一项（li.food-list-hook）距离顶部的高度listHeight:[],//垂直滚动距离（实时变化）scrolly:0,//商品列表goods:[]}}初始化部分：created方法中，左侧menuWrapper容器和右侧foodWrapper容器的数据获取和初始化是必要的。created(){//使用vue-resource请求本地数据和模拟后台数据（注意一定要放在static目录下）this.$http.get("../static/data.json").then(response=>{//获取成功后执行response=response.body;this.goods=response.goods;//为了避免数据请求未完成，foodWrapper和foodWrapper的滚动初始化//和计算当前高亮位置的方法已经执行，应该在获取数据成功后调用this.$nextTick(()=>{this._initScroll();this._calculateHeight()})},error=>{console.log("调用失败"+error)})}我thods_initScroll初始化，实现滚动_initScroll(){//初始化左侧滚动（滑动类默认不点击，必须添加click:true触发事件）this.menuScroll=newBScroll(this.$refs.menuWrapper,{click:true})//创建右侧滚动/*probeType:Number默认值0可选值：1,2,3作用：有时候我们需要知道滚动的位置当probeType为1时，非实时（屏幕滑动一定时间后）派发scroll事件；当probeType为2时，屏幕滑动时会实时调度scroll事件；当probeType为3时，不仅在屏幕滑动过程中，而且在动量滚动动画运行过程中，都会实时调度scroll事件*/this.foodScroll=newBScroll(this.$refs.foodWrapper,{probeType:3click:true});//绑定右侧的foodWrapper设置滚动事件this.foodScroll.on('scroll',(pos)=>{//Scrolly存储实时滚动坐标this.scrolly=Math.abs(Math.round(pos.y));})}_calculateHeight计算每一项（li.food-list-hook）距离顶部的高度点击左侧菜单，滚动到右侧相应位置selectMenu(index,event){//index和foodWrapper中的每个li.food-list-钩子的index对应//先去掉better-scroll自带的点击事件if(!event._constructed){return;}//获取所有li.food-list-hookletfoodList=this.$refs.foodWrapper.getElementsByClassName("food-list-hook");//右边一个li.food-list-hooklet对应的下标左键点击元素el=foodList[index];//执行点击后滚动到对应元素的操作this.foodScroll.scrollToElement(el,300);}计算左菜单当前高亮位置computed:{currentIndex(){for(leti=0;iheight&&this.scrolly