首先把Home.vue原来的原生Js吸顶效果的样式删除
tabControl的吸顶效果
#### 9.1. 获取到tabControl的offsetTop
* 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop
* 但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.
* 如何获取正确的值了?
* 监听HomeSwiper中img的加载完成.
* 加载完成后, 发出事件, 在Home.vue中, 获取正确的值.
* 补充:
* 为了不让HomeSwiper多次发出事件,
* 可以使用isLoad的变量进行状态的记录.
* 注意: 这里不进行多次调用和debounce的区别
1.在data()里定义 tabOffsetTop: 0初始值 ,用于保存offsetTop值
2.
这种在mouted里打印的结果不对
在mounted里面打印这个垂直距离结果是错误的,因为轮播图里面的图片可能还没有加载完成,影响了最终的正确结果。所以我们要去监听轮播图的图片的加载的完成,然后去获取offsetTop
首先@load监听图片加载完成-----HomeSwiper
将加载完成事件发出到父组件
父组件监听到子组件发出的事件
获取了此时的offsetTop
但是这样的话,轮播图有几张就获取了几次offsetTop,重复获取没必要,所以下面来改进
用这种开关的效果,保证了只向父组件发送一次事件----HomeSwiper
#### 9.2. 监听滚动, 动态的改变tabControl的样式
* 问题:动态的改变tabControl的样式时, 会出现两个问题:
* 问题一: 下面的商品内容, 会突然上移
* 问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.
* 其他方案来解决停留问题.
* 在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.
* 当用户滚动到一定位置时, PlaceHolderTabControl显示出来.
* 当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.
1.先设置一个变量 isTabFixed默认是false
2. 根据这个属性决定 如果滚动距离超过tabOffsetTop,就为true
3.根据 isTabfixed是否为true,决定要不要加 position:fixed 吸顶效果
但是这样tabControl会闪现一下,并不能长久停留
所以把上面第三步删掉
再复制一个tab-control,一般的时候让其隐藏,当滚动到tabOffsetTop距离时让其显示
这个也要改成tabControl2