基于Vue实现上拉加载更多(方法+思路)

原创 知乎其微 教程 VUE 168阅读 24 天前 举报

废话不多说哦,直接上代码
首先我们需要一个的大致结构差不多是这样的

基本的结构差不多就这样了
1、一个大盒子
2、一个我们需要显示的内容区
3、一个加载状态

我们要实现的功能:
1、页面进入自动去加载我们的数据,滑动到底部继续加载新的数据
2、当第一次数据加载完成但是数据不足一屏,继续实行加载方法,直到超过一屏停止
3、页面数据少,不足一屏且没有更多数据,不显示底部加载状态

我们在data里配置一些我们需要的参数

接下来我们在mounted里面写一些我们需要的内容:

现在我们写,上拉加载更多,什么时候加载等

到这里是不是大概明白加载更多实现方式了,现在来写上面实现功能的第二和第三点:

上面的switchBottom我们会在上面的mounted里面默认执行一次
但是如果只执行一次,那么如果遇到我们功能的第二点场景的时候,就不能实现我们要的效果了,所以我们需要在updated周期时候再执行,如果有用到缓存,也需要将方法写在activated一次

最后我们需要将页面元素绑定一个滚动事件和移除滚动事件,滚动事件方法也需要在mounted里调用

最后一点要注意,我们离开了当前路由,是需要将我们的滚动事件销毁的,不要会一直处于监听状态

到此我们的加载更多方法基本完成;
值得注意的是,需要里面绑定滚动的元素是生效在什么地方,需要根据自己项目具体去写对应的样式,总之,能滚动的元素是有一个固定高度的,如果都没有,只能将滚动事件绑定到body上,将body的高度设置为100%,voerflow:auto即可

最后怎么使用,在父元素引入我们的组件
import LoadMore from '@/public/LoadMore/Index.vue'
在html片段写上
<LoadMore ref="LoadMore" @loadMore="onScrollBottom"></LoadMore>

conScrollBottom方法里面调用请求数据的方法

getData方法里面需要进行如下判断
数据请求成功后:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复