目录

一、效果展示

二、实现步骤

三、涉及要点

1. Vue 语法 v-show

2. 获取窗口到元素顶端的距离

3. 监听事件

---

一、效果展示

        最近在做项目时有一个网页渲染是这样的，某一个元素在开始不显示，只有当页面滑动到指定的位置时才显示该元素。效果如下：

二、实现步骤

1. 创建元素并设置为固定定位。

2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏；

3. methods 中创建监听窗口滚动方法，通过判断元素最顶端与页面最顶端的距离决定是否显示；

//监听窗口滚动
windowScrollListener() {
  //获取操作元素最顶端到页面顶端的垂直距离
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop >= 480) {
    this.isVisable = true; //大于480时显示元素
  }
  if (scrollTop < 480) {
    this.isVisable = false; //小于480时隐藏元素
  }
}

4. 创建阶段 created 中绑定监听事件进行监听；

created() {
   //添加滚动监听事件
   //在窗口滚动时调用监听窗口滚动方法
   window.addEventListener('scroll', this.windowScrollListener);
},

5. 销毁阶段 destory 中删除监听事件，离开页面时删除，以保证它不会影响其他页。

destroyed() {
   //离开页面时删除该监听
   window.removeEventListener('scroll', this.windowScrollListener)
}

三、涉及要点

1. Vue 语法 v-show

<元素 v-show="true/false">

v-show 是 Vue.js 中的一个指令，用于根据表达式的真假值来切换元素的 CSS 属性 display。当表达式为 true 时，元素会被渲染并显示；当表达式为 false 时，元素仍然会被渲染在 DOM 中，但其 CSS 属性 display 会被设置为 none，因此元素不会在页面上显示。

通俗的讲，它是专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时。当 new Vue() 扫描到 v-show，就会先计算 = 右边的判断条件的值，如果 = 右边的判断条件值为 true，则当前元素默认正常显示，如果=右边的判断条件值为 false，则 v-show 自动被翻译为 display:none，当前元素隐藏且不占位。

需要注意当需要频繁切换元素的显示状态时，使用 v-show 会更加高效，因为它避免了 DOM 的重新渲染。如果元素可能永远不会渲染，或者渲染开销很大（例如，包含大量子元素或复杂的计算），则应该使用 v-if。在 Vue 3 中，v-show 和 v-if 的行为与 Vue 2 相同，但 Vue 3 的整体性能提升可能会使得这些差异在某些情况下不那么显著。

2. 获取窗口到元素顶端的距离

        首先需要获取页面滚动的垂直距离。第一步就是获取浏览器的可视区域（在浏览器中能看到页面的区域）。

（1）先使用 document.documentElement 获取页面；

这里需要注意：

在没有声明 DOCTYPE 的 IE 浏览器中，浏览器显示窗口大小只能以下获取：

document.body.offsetWidth
document.body.offsetHeight

在声明了 DOCTYPE 的浏览器中，可以用以下来获取浏览器显示窗口大小：

document.documentElement.clientWidth
document.documentElement.clientHeight

所以为了所有浏览器都能适应，我们可以两者连用：

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

（2）使用属性 scrollTop 获取位于对象最顶端和窗口中可见内容的最顶端之间的距离，也就是我们所要的操作的 div 最顶端到页面最顶端的距离。

3. 监听事件

添加监听事件：addEventListener()；移除监听事件：removeEventListener()；语法如下：

element.addEventListener(event, function, useCapture);

• 第一个参数为事件类型；
• 第二个参数为事件发生时调用的函数；
• 第三个参数指定是使用事件冒泡还是事件捕获，此参数可选。

如我们的代码，监听到窗口滚动时调用 methods 中的判断方法。

window.addEventListener('scroll', this.windowScrollListener);

---

拓展：v-show 和 v-if的差别

v-show 和 v-if 都是 Vue.js 中用于条件渲染的指令，但它们之间有一些关键的区别：

• DOM 操作：v-if 是“真正的”条件渲染，因为它会确保在条件为假时，元素及其子元素不会被渲染到 DOM 中。而 v-show 只是简单地切换元素的 CSS 属性 display。
• 初始渲染：如果条件在初始渲染时为假，v-if 下的元素及其子元素将不会被渲染。而 v-show 下的元素则会被渲染，但会被设置为 display: none。
• 性能考虑：由于 v-if 是真正的条件渲染，如果元素可能永远不会渲染，使用 v-if 会更好，因为它可以节省渲染开销。而 v-show 适合频繁切换显示状态的场景，因为它只是切换 CSS 属性，不需要重新渲染 DOM。