vue如何监听滚动条到底部

这篇文章主要介绍“Vue如何监听滚动条到底部”，在日常操作中，相信很多人在vue如何监听滚动条到底部问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue如何监听滚动条到底部”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1、怎样用纯js判断滚动条是否到底部？

先了解几个关键词：

（1）滚动条到顶部的位置：scrollTop

（2）当前窗口内容可视区：windowHeight

（3）滚动条内容的总高度：scrollHeight

触发监听的函数是：

window.onscroll = function()｛...｝

判断到底部的等式: scrollTop+windowHeight=scrollHeight;

2、主要函数代码

 created(){ window.onscroll = function(){ //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;    //滚动条到底部的条件    if(scrollTop+windowHeight==scrollHeight){    //写后台加载数据的函数   console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);    }   } }

为什么要使用Vue

Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

到此，关于“vue如何监听滚动条到底部”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！