P177-解决吸顶效果-TabControl的offsetTop获取分析

首先把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

标签：滚动,P177,获取,offsetTop,TabControl,吸顶,tabControl,加载
来源： https://blog.csdn.net/m0_51414342/article/details/122195256