Vue实现上拉和无限数据加载
发布时间
阅读量:
阅读量
思路参考:https://www.jb51.net/article/96373.htm
页面已经通过fetch获取所有数据,并且用v-for显示出来所有的数据
需求:完成滚动加载功能:当页面刚加载时就展示几条数据,在滚动过程中继续加载更多数据
分析:
第一步,在页面开始渲染时自动获取一次列表,并填充基础内容。第二步,在每次滚动时也需要获取新的列表以继续加载剩余内容。
所以为了在methods中实现一个能够持续提供内容的方法, 在成功获取到数据之后, 我们将所获取的数据以数组的形式整合到当前列表中, 从而使得我们能够加载更多的内容.
基于这个思路,在进一步考虑get方法所需的具体参数时发现:其中之一是一个包含有page和limit两个属性的对象;另一个则是用于触发处理逻辑的回调函数。已经解释过,在实现过程中只需要将这些数组进行拼接即可;因此,在当前阶段只剩最后一个page参数尚未完成设置。
基于这个思路,在进一步考虑get方法所需的具体参数时发现:其中之一是一个包含有page和limit两个属性的对象;另一个则是用于触发处理逻辑的回调函数。已经解释过,在实现过程中只需要将这些数组进行拼接即可;因此,在当前阶段只剩最后一个page参数尚未完成设置。
初始化时,在页面加载过程中,默认将变量page设为1,并表示第一页的内容。随后页码仅通过点击'Ne
全部评论 (0)
还没有任何评论哟~
