前言
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢?...实现思路
首先,我们需要在vuejs中引入axios
然后,我们需要从vue中,引入onMounted,onUnmounted生命周期钩子函数
然后,我们需要在onMounted函数中,进行监听
而在onUnmounted...函数中,我们需要取消监听,解绑
编写事件处理函数handleScroll, 获取变量scrollTop是滚动条滚动时,距离顶部的距离,获取变量scrollHeight是滚动条的总高度,获取变量clientHeight...是滚动条可视区域的高度
当滚动条到达底部,并且距离底部小于10px时,加载数据,也就是请求axios数据,页码++,重新加载数据函数
为了防止用户频繁触发下拉滑动滚动条,往往需要添加一个函数防抖,在指定的时间内...什么上拉,下拉刷新,下拉加载更多,其实原理都差不多,都是利用了防抖函数,然后利用定时器,在规定的时间内,如果再次触发,则清除定时器,重新开始计时。实现方式都差不多