vue takeout slide commodity merchants APP coding main page
A first step
1. The first step is to build the main page shop.vue , The page consists of two parts, a first part of the business head of the page shopHeader , router-view using a second portion of a dynamic page rendering, including ordering (shopGoods) Evaluation business
Code is as follows:
routing components:
Home page:
Step Two: Write ShopGoods components
ShopGoods component consists of two parts, the left side of the menu page, to the right product list page is sliding menu on the left column and the right side of the product page of today we want to achieve
at this time we need to use the Scroll-assembly better
1. Installation better -scroll
npm install --save better-scroll
2. referenced in the project
import BScroll from 'better-scroll'
3. SUMMARY sliding area bscroll-container is placed in
the contents of this time the contents are slidably UL
4. Plugins
prior Plugins, we need to understand a method vue ------ nextTick () method
in the data after the change of an operation to be performed, and this operation requires the use of data changes over time change the DOM structure, we use nextTick
Definition: execution delayed callback DOM after the end of the next update cycle. Using this method immediately after modifying the data, get the DOM updated.
Is simple to understand: when the data is updated, after rendering dom, the automatic execution of the function
When Vue.nextTick need to use ()? ?
- 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值为数字)转成数组
此时已经获取到每个分类的高度
With all the height, this time once we Merchandise slipped breakfast porridge this one, the corresponding menu section, it should show breakfast porridge,
suppose we height at this time is 300,
Tops array {0,250,400,800 .. . . }
Highly breakfast porridge of this piece of 250 to 400, according to findIndex method, we find out where we are in this position index = 2, this time, we need to index = 2 in this position to bind a css style to we are currently represented here, 
here, we have completed sliding commodity module with the column to the right of the menu for a change.
We also need to click on the menu column on the right merchandise will slide
1. for each section of each item in the menu to add click function
