准备工作
别忘了要先搞定API才好拿到想要的分页数据！就用这个叫作/api/data 的接口，你只需要告诉它要从第几页开始数，它就能给你带回相对应的数据喔！对了，记得看看响应的消息里是不是还有每页有多少条记录和总共有几页这些小细节这样我们前端才能继续做下面的事情啰！
组件化开发
Vue说白了就是教我们怎么处理组件，这样才能把那种烦人的无限滚动和分页功能变得轻松愉快，就跟InfiniteScroll组件似的，直接拿来用就能搞定。直接告诉它显示几格数据，再告诉它总共多少条不就完了！
滚动事件监听
想要用Infinite Scroll组件的话，要注意看看下面手势滑下来能不能自动载入新内容！首先了解下window的scroll事件是啥。我们给窗口加上一个滑屏事件侦听器，这样你滑动屏幕，handleScroll函数就能被触发。然后再看看，到底到没到底部？
handleScroll这回事，要知道我们现在在哪个位置，有点像逛地图似地。首先看看页面滚到哪了(可以靠scrollTop告诉你)，窗有多高(windowHeight会告诉你的)，还有文件有多长(documentHeight还是能搞定)。然后，来个简单的加法运算吧- scrollTop + windowHeight有没有大于等于documentHeight？如果真的这样，哈喽，那说明咱们的页脚马上就要出来见人了！
加载下一页数据
看一眼下面有没有新内容，没新东西就开始刷最新数据，这事儿交给loadNextPage函数做。记得先检查一下状态，是不是页面已经翻到底，还是只剩最后一页没看完？要是都看完了，那就简单点，直接进入下一步；如果还有别的页面在加载中，就去抓取新的信息，然后把它们加到现有的信息里，还别忘了算清楚现在看到的和全部数据各有多少。
数据展示与提示信息
别忘了按实际的数据来设置Infinite Scroll。用v-for过一遍数据，再给每个对象加上专属标签，就能确保不会出错了！别忘了在模块底部留点空间，一旦页面数量超出整体数据量，就显示出“已加载所有数据”咯。
功能实现与优化
告诉你亲身经历过的事情用Vue的InfiniteScroll组件来搞滚动加载和分页简直小菜一碟~装上这神奇小插件后，选好选项，就能尽情玩儿无限加载。当你滑到底部时，它能自动帮你找更多的内容看，是不是超级给力？此外，根据每页展现出来的数据量及所有数据来分页的话，你的小伙伴们浏览起来会更加畅快开心哒！
代码示例与调试
为了更好地理解上述概念，在这里给出一个简单的代码示例：
{
"total": 100, // 总数据条数
"list": [...] // 当前页的数据列表
}
javascript
// InfiniteScroll.vue
= totalPages">已加载所有数据
export default {
data(){
return {
dataList:[],
currentPage:1,
totalPages:5,//假设总共5页
};
},
mounted(){
别忘了当窗户摇晃时，点下‘滚动’就会让箭头动起来！
export default {
data() {
return {
page: 1, // 当前页码
total: 0, // 总数据条数
list: [] // 当前页的数据列表
};
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight >= documentHeight) {
this.loadNextPage();
}
},
async loadNextPage() {
if (this.page >= Math.ceil(this.total / this.pageSize)) {
return; // 已加载所有数据
}
const response = await fetch(`${this.apiUrl}?page=${this.page + 1}`);
const result = await response.json();
this.total = result.total;
this.list = [...this.list, ...result.list];
this.page++;
}
}
};
beforeDestroy(){
把'滚动条事件监听器移除了，也就意味着不再处理这个函数了
methods:{
handleScroll(){
滚动条顶部那块儿，有两个方法就能轻松搞定啦：document.documentElement.scrollTop和document.body.scrollTop~
简单测下窗户的高！这个数值就从文件内容或者主体部分看来。
要获取滚动高度，你得看你显示出来的区域有多大。方法有两个：（1）你可以用(document.documentElement.scrollHeight)这种方式推断出来；（2）或者简单地用浏览器窗口或网站的总高度(document.body.scrollHeight)来计算。算出结果后，将其设为你的documentHeight即可搞定！
如果滚动条超过网页边界，那就...
this.loadNextPage();
}
},
loadNextPage(){
如果现在的页面已经是最后一页了，那么我们就得...
return;
//模拟异步请求
setTimeout(()=>{
//假设每次请求返回10条数据
- {{ item.name }}
= Math.ceil(total / pageSize)">已加载所有数据
咱们就搞个长度为10 的新数据列表，每个项目上都得放上几组键值对儿才行。具体怎么操作为啥？那就是这样子滴：
ID设为：这就是咱们的那堆数据的总长加上这儿的索引数。
就叫"东西$（再加上我现在想给它加的数）"！
}));
想要把新数据加到现有列表里吗？直接这样操作就搞定啦：this.dataList =[... this.dataList,...new Data]。
this.currentPage++;
}, 500);
};
总结与展望
看完上面那些步骤和代码示例，现在已经知道怎么在Vue组件里做无限滑屏和展示网页。这样用起来感觉超棒，处理大数据也轻松多了。实战时，可以酌情改改代码架构，让效果更炫酷！
希望这篇文章对你有所帮助，让你更懂Vue组件中如何搞定无限加载和分页显示！有啥问题别客气，随时找我！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/13070.html，转载请注明出处~~~ 
评论0