VUE单页面应用,如何判断组件内块级元素中内容滚动到底

第一次写自己的原创技术博客,欢迎大家批评指正。

最近在用VUE框架做一个移动端的单页面应用,项目中碰到了一个关于滚动加载的问题,由于某些原因,用已有的滚动加载的框架实现不了UI小GG设计出来的效果,无奈之下只能自己去摸索。

在网上面看了很久,发现滚动加载的关键就是如何去判断用户已经下拉到内容的最底部。在网上搜索资料,发现很多方法都是基于页面本身,但笔者的项目中,这个滚动加载是放在组件中的一个<div></div>中,所以网上的大部分资料都不适用。最后找到了这个。这里是链接地址,里面的一张作者的手绘图给了我很大的启发。


在VUE中,v-on是进行事件绑定的,在这里面有一个scroll事件。首先,我们要做的就是把这个事件绑定到目标块级元素上面去。具体代码:<div @scroll="yourmethod"></div>。

这个方法会默认传入一个event参数。笔者在方法中使用了console.log(e);打印了一下这个事件对象。

然后控制台的显示如下面这几张图:



如图所示,我们在能在这个事件里面的target属性中轻松的拿到scrollTop,offsetHeight和scrollHeight(笔者的理解就是块级元素中内容撑开的高度)。当然这里有一个前提,就是你要展示的内容必须是要大于块级元素预设的高度,然后这样设置overflow:auto。

至此,我们可以得到一个公式,scrollHeight = scrollTop + offsetHeight。后面这个offsetHeight具体说应该是可视高度,视具体情况而定,由于笔者的项目中这个块级元素的高度,直接设置成了设备的高度,即:height:100vh;如果是在自己的项目中,这个高度应该是块级元素的高度。不过这个vh这个单位好像 还是可能引发一些兼容性的问题,建议慎重使用。

后面的加载过程就相对简单了,只要当scrollTop + offsetHeight>=scrollHeignt时,我们去向后台申请数据就好了。这不是这篇博客的重点,要是有兴趣的可以在下面留言,我们一起交流,一起进步。

展开阅读全文

没有更多推荐了,返回首页