vue外卖APP 商家主页面商品滑动代码编写

一.第一步

1.第一步首先构建主页面shop.vue，此时页面包括两部分，第一部分商家页面头部shopHeader，第二部分利用router-view为动态渲染的一个页面，其中包括点餐(shopGoods) 评价 商家

代码如下：
路由组件：

主页页面：

第二步：编写ShopGoods组件

ShopGoods组件由两大部分组成，左侧菜单页面，右侧商品列表页面，今天我们要实现的就是左侧菜单栏目与右侧商品页面的滑动

此时我们需要用到组件better-scroll
1.安装better-scroll

npm install --save better-scroll

2.项目中引用

import BScroll from 'better-scroll'

3.滑动区域的内容放在bscroll-container中


此时 滑动的内容都是ul内的内容
4.插件使用
在插件使用之前，我们需要了解一个vue方法------nextTick()方法
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时,我们使用nextTick

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

什么时候需要用的Vue.nextTick()？？

• 1.、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
• 2、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。（这里和我们写的代码有关，我们需要使用第三方滑动插件better-scroll）

更加通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它


如果滚动部分需要有点击事件，需要在参数里加上 click：true。
此时菜单 和商品列表已经可以滑动
5.然后我们需要做菜单和商品列表同步滑动
需要设置两个数值，
第一个需要右侧滑动的Y轴坐标scrollY: 0,，记录滑动过程时实时变化
第二个需要所有右侧分类li的top组成的数组tops: [] (列表第一次显示后就不再变化)

这个时候我们就需要给右侧商品列表绑定监听了，实时记录Y轴坐标

紧接着我们需要初始化tops，我们需要去收集每一个商品分类 的高度，比如早餐粥里有三种粥，这三种粥属于一个分类，需要计算出这个高度


ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
Array.prototype.slice.call(arguments)能将具有length属性的对象(key值为数字)转成数组
此时已经获取到每个分类的高度

所有的高度有了，这时候 一旦我们商品栏目滑到了早餐粥这一块时，对应的菜单栏目，应该显示早餐粥，

假设我们此时的高度为300，
tops数组里{0,250,400,800.。。。}
早餐粥的这一块的高度为250-400，根据findIndex方法，我们查出我们所在的位置在index=2这个位置，这个时候，我们就需要给index=2这个位置绑定一个css样式，来表示我们当前在这里，
到这里，我们已经完成了滑动商品，右边菜单栏目随着改变的模块了。
我们还需要当点击菜单栏目时，右边商品随之滑动
1.给每一个菜单栏目里的每一项添加点击函数