一个典型的电商购物页：VUE2.0/导航列表联动/头部自动收缩/购物车动画效果
作者:admin 日期:2017-08-08这种结构在电商中很常见，比如饿了吗的店铺页。我边写边参考饿站。
项目地址:
用到的主要的第三库：
1、bscroll（iscroll的一个改进版本），滑动框架。iscroll能实现的功能，比原生滚动控制要强得多。相应的API也更好用。
2、lodash用来实现各种快速数据运算。
技术要点：
1、对于iscroll的一些API的熟悉，比如如何获取滚动高度（onScroll），如何滚动到指定位置（scrollToElement）。
2、必须在dom渲染完成后，再进行iscroll定义，可使用Vue.nextTick。再比如当容器高度发生了变化 ，必须要refresh重建当前iscroll对象。当refresh时，必须要等容器动画完成后，方可进行。
3、最难点在于建立右侧位置模型，用于左导航与右列表的位置对照。也就是说，每次滚动行为，都会触发当前位置与位置表发生比对，以随时更新左侧导航状态。
4、在建立位置模型过程中，数次用到lodash,比如说：
// 从位置数组中，查找一个最接近当前坐标的值，然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;
如果不用工具函数，这种小算法写死人。
5、右侧列表是一次性载入的，可考虑做懒加载。如果列表特别长，也要考虑异步加载。
6、点击购物车的加号时，“小球落入购物车”这一效果，基本实现思路是，先算出起、终点的位置，然后用TweenMax实现动画。最后将其封装做成vue组件，以备重用。非本文重点，不做详述。
