Vue实现一个无限加载列表功能

时间：2021-05-26

一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表无限加载</title> <style> * { margin: 0; padding: 0; } li { height: 50px; border-bottom: 1px solid #c7c7c7; list-style: none; line-height: 50px; padding-left: 30px; } </style></head><body> <div id="unlimitedList"> <ul> <li v-for="item in list">{{ item }}</li> <li :style="{display: loading ? 'initial' : 'none'}">Loading......</div> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script> function fetch(from, size = 20) { // 模拟后台获取数据 console.log('获取数据 传入: ', { from, size }); let data = []; let total = 98; size = Math.min(size, total - from + 1); for (let i = 0; i < size; i++) { data.push(`列表项${from + i}`); } let ret = { data, total }; return new Promise(function (resolve, reject) { setTimeout(() => { console.log('获取数据 返回: ', ret); resolve(ret); }, 500); }) } new Vue({ el: '#unlimitedList', data: { list: [], loading: true, // 数据加载中 allLoaded: false // 数据已经全部加载 }, methods: { getData() { this.loading = true; // 显示加载中的标识 fetch(this.list.length + 1).then(res => { this.list.splice(this.list.length, 0, ...res.data); // 将新获取到的数据连接到 this.list (vue 能检测到 splice() 函数 this.loading = false; // 加载结束 取消加载中显示 if (this.list.length === res.total) { this.allLoaded = true; } }) }, onScroll(e) { if (this.loading || this.allLoaded) return; let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离 let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度 let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度 if (top + vh >= height) { // 滚动到底部 this.getData(); // 如果已经滚到底了 获取数据 } } }, created() { this.getData(); window.addEventListener('scroll', this.onScroll); }, destroyed () { window.removeEventListener('scroll', this.onScroll); } }) </script></body></html>

总结

以上所述是小编给大家介绍的Vue实现一个无限加载列表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章