Vue混入mixins滚动触底的方法

前言

在app端常常看到类似加载数据的动画，接下来我们来实现滚动触底加载动画提示，以及如何复用这些逻辑。

如何判断滚动触底

来看下几张图：

情况一：

当文档高度还为超过可视区域高度时，不存在滚动，所以也没有滚动触底

 

情况二：

当文档高度超过可视区域的高度时，还有剩余的文档没有滚动完，也就是说 可视区域高度 + 滚动高度 < 文档高度 ，此时没有达到滚动触底的条件

 

情况三：

文档高度大于可视区域，并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度

 

判断是否滚动到底

经过上面三种情况的分析，我们需要拿到 可视区域的高度 , 滚动高度 , 文档高度 这三个变量来进行比较。

可视区域的高度

function getWindowHeight() {
 return document.documentElement.clientHeight;
}

滚动高度

对有doctype申明的页面使用document.documentElement.scrollTop，safari特例独行：使用 window.pageYOffset

function getScrollHeight() {
 return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}

文档高度

function getDocumentTop() {
 return document.documentElement.offsetHeight;
}

代码实现

触底打印

最后

将滚动触底的逻辑和 UI 都集成到 scroll.js 中，复用都方式可以放在 mixins 可以抽离成 v-directive,这样我们可以接受到绑定的 dom 不仅仅可以做 window 的滚动触底事件的判断，也可以 实现单个元素的滚动事件触底的监听 。后续可以在实现 v-directive 的版本。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。