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

首先把Home.vue原来的原生Js吸顶效果的样式删除

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

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

tabControl的吸顶效果

#### 9.1. 获取到tabControl的offsetTop

* 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop
* 但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.
* 如何获取正确的值了?
  * 监听HomeSwiper中img的加载完成.
  * 加载完成后, 发出事件, 在Home.vue中, 获取正确的值.
  * 补充:
    * 为了不让HomeSwiper多次发出事件,
    * 可以使用isLoad的变量进行状态的记录.
  * 注意: 这里不进行多次调用和debounce的区别

 

1.在data()里定义  tabOffsetTop: 0初始值  ,用于保存offsetTop值

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

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

 这种在mouted里打印的结果不对P177-解决吸顶效果-TabControl的offsetTop获取分析

 在mounted里面打印这个垂直距离结果是错误的,因为轮播图里面的图片可能还没有加载完成,影响了最终的正确结果。所以我们要去监听轮播图的图片的加载的完成,然后去获取offsetTop

首先@load监听图片加载完成-----HomeSwiper

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

将加载完成事件发出到父组件

P177-解决吸顶效果-TabControl的offsetTop获取分析 父组件监听到子组件发出的事件P177-解决吸顶效果-TabControl的offsetTop获取分析

 获取了此时的offsetTopP177-解决吸顶效果-TabControl的offsetTop获取分析

 

 但是这样的话,轮播图有几张就获取了几次offsetTop,重复获取没必要,所以下面来改进

用这种开关的效果,保证了只向父组件发送一次事件----HomeSwiper

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

 #### 9.2. 监听滚动, 动态的改变tabControl的样式

* 问题:动态的改变tabControl的样式时, 会出现两个问题:
  * 问题一: 下面的商品内容, 会突然上移
  * 问题二: tabControl虽然设置了fixed, 但是也随着Better-Scroll一起滚出去了.
* 其他方案来解决停留问题.
  * 在最上面, 多复制了一份PlaceHolderTabControl组件对象, 利用它来实现停留效果.
  * 当用户滚动到一定位置时, PlaceHolderTabControl显示出来.
  * 当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.

1.先设置一个变量 isTabFixed默认是false

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

 2. 根据这个属性决定 如果滚动距离超过tabOffsetTop,就为true

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

 3.根据  isTabfixed是否为true,决定要不要加 position:fixed 吸顶效果

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

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

 但是这样tabControl会闪现一下,并不能长久停留

所以把上面第三步删掉

 再复制一个tab-control,一般的时候让其隐藏,当滚动到tabOffsetTop距离时让其显示

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

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

这个也要改成tabControl2

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

 

上一篇:WPF基础五:UI③带标题内容控件TabControl 


下一篇:重新绘制TabControl的Tabpage标签,添加图片及关闭按钮