Vue实现一个无限加载列表功能
一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。
<!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实现一个无限加载列表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=
-
Vue下滚动到页面底部无限加载数据的示例代码
看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充 本文技术要点 Vue生命周期 axios简单用法 moment.js格式化日期 图片懒加载 结合原生js来写scroll事件 请求节流 创建项目 首先创建一个简单的vue项目 #
-
Vue中的无限加载vue-infinite-loading的方法
本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';
-
Vue.js实现无限加载与分页功能开发
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >
-
实现一个简单的vue无限加载指令方法
vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令. 无限加载的原理是通过对滚动事件的监听,每一次滚动都要获取到已滚动的距离,如果滚动的距离加上浏览器窗口高度,会大于等于内容高度,就触发函数加载数据. 先介绍不使用 vue 的情况如何实现无限加载. 不使用框架 首先是html: <!DOCTYPE html><html lang="en"> <head><meta char
-
Vue实现一个无限加载列表功能
一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表无限加载</title> <style> * { margin: 0; padding: 0; } li { height: 50px; border-bottom: 1px s
-
Android Jetpack Compose无限加载列表
目录 前言 方法一: paging-compose 方法二:自定义实现 添加 LoadingIndicator 总结 前言 Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging-compose 自定义实现 方法一: paging-compose Jetpack 的 Paging 组件提供了对 Compose 的支持 dependencies { ..
-
Vue简易版无限加载组件实现原理与示例代码
目录 背景 实现功能 Props 使用 组件实现 scroll 事件 $emit 发射事件和 props 回调函数的区别 总结 背景 遇到的两个问题:scroll 事件不触发.如何将 loading 状态放在无限加载组件中进行管理. 无限加载组件在展示列表页数据时比较常见.特别是在 H5 列表页中,数据比较多,需要做分页,无限加载组件就是一个非常好的选择. 当列表页数据比较多时,一次性从服务端拿到所有的数据会比较耗时,长时间不展示列表数据,比较影响用户体验.所以对于一般的长列表数据,都会做分页.
-
vue实现一个懒加载的树状表格实例
目录 一个懒加载的树状表格实例 安装 模板 js代码 使用el-table懒加载树形表格时的注意点 1.版本问题 2.数据显示 3.滚动条 4.数据结构 5.el-table的fixed导致的问题 一个懒加载的树状表格实例 实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些. 接下来,说一下使用方式. 安装 npm install xe-utils vxe-table // 入口文件引入,一般是main.js
-
vue 使用vant插件做tabs切换和无限加载功能的实现
样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观 官方文档 我在文件中
-
通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEventListener('scroll', this.handleScroll) }, destroyed () { window.removeEven