vue scroll滑动到底部自动加载

vue中常常会遇到滑动加载的情况,为了不让数据一次性请求到太多。

那么接下来就来实现一下这个功能吧





 

1.首先创建10个div,在需要显示的内容区域内。为了区分,颜色有可能有点辣眼睛。

vue scroll滑动到底部自动加载_第1张图片

2.检测滑动条是否滑倒底部了

在滑动区域中加入@scoll 监听时间

vue scroll滑动到底部自动加载_第2张图片

当该区域的的正文区域的高度,减去可见区域的高度,小于设定的高度的时候,就认为这个滑块可以加载新的资源了。

如图在不停往下移动滑块的时候,就会不断增加滑块的个数

vue scroll滑动到底部自动加载_第3张图片

 

3.当请求接口的时候也是同理的。添加一个页数的参数,跟是否可以加载的判定。





 

python课程

https://marketing.csdn.net/poster/109?utm_source=NEWFXDT

你可能感兴趣的:(vue.js,vue,js,vue.js)