201203-4-3-吸顶效果的实现

八.上拉加载更多
scroll.vue=>Home.vue

9.1 必须知道滚动到多少时有吸顶效果;
offsetTop
所有的组件都有一个属性$el: 用于获取组件中的元素

console.log(this.$refs.tabControl.$el.offsetTop);

9.1
这个时候要获取tab对应的offsetTop，但是在mounted中获取tabControl的offsetTop
但是，如果直接在mounted中获取tabControl的offsetTop，那么值是不正确的。
如何获取正确的值？
监听HomeSwiper中的img的加载完成，加载完成之后，发出事件，在home.vue中获取正确的值
补充：
1. 为了不让HomeSwiper多次发出事件，
2. 可以使用isLoad的变量进行状态的记录。
** 注意：这里不进行多次调用和debounce的区别。

---

9.2 监听滚动，动态改变tabControl的样式
tabControl吸顶效果如何实现呢？

1. position: fixed使得tabControl脱离文档流;
2. better-scroll的特性：随着better-scroll一起滚动去了。
3. fixed也是改变translate的。
   问题：动态改变样式tabControl的样式时候，会出现两个问题，
   问题一：下面的商品内容会突然上移
   问题二：tabControl虽然设置了fixed，但是也随着better-scroll一起滚出去了。
   其他方案来解决停留问题：
   在最上面，多复制了一份PlaceHolderTabControl组件对象，利用它来实现停留效果。
   当用户滚动到一定位置时，placeholderTabControl会显示出来，
   当用户滚动没有达到一定位置的时候，placeHolderTabControl会隐藏起来.

---

十. 让home保持原来的状态
10.1 让home不要随便销毁掉
keep-alive
10.2 让home中的内容保持原来的位置
**
离开时，保存一个位置信息saveY;
**
进来时，将位置设置为原来保存的位置saveY信息即可.
**
注意：最好回来时，进行一次refresh();