Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14
一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。
<!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中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- vue实现pc端无限加载功能
主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事 ...
- Vue中router路由异步加载组件-优化性能
何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...
- 一个无限加载瀑布流jquery实现
实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Qt实现小功能之列表无限加载（创意很不错：监听滚动条事件，到底部的时候再new QListWidgetItem）
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- WP8.1开发中ListView控件加载图列表的简单使用（1）
我也是刚接触WP编程没几个月,就是在这段时间一直闲着没事,然后又比较喜欢WP这款系统,就学习了WP这方面的开发言语,自学是很困难的,掌握这方面的资料不多,很初级,就是自己在网上找资料学习过程中,看到别 ...
- vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
随机推荐
- python第十六天
一.包 1.什么是包? 一系列模块的集合 2.有什么用? 包通过文件夹来管理一系列功能相近的模块 3.包重点? 包中一定有一个专门用来管理包中所有模块的文件 __init__ 4.什么是包名? 包 ...
- maya cmds pymel selectType() 选择类型切换
maya cmds pymel selectType() 选择类型切换 import maya.cmds as cmds cmds.selectType( polymeshFace = True ) ...
- PTA_输入符号及符号个数打印沙漏（C++）
思路:想将所有沙漏所需符号数遍历一遍,然后根据输入的数判断需要输出多少多少层的沙漏,然后分两部分输出沙漏. #include<iostream> #include<cstring ...
- cross-env使用笔记
1,cross-env能跨平台地设置及使用环境变量 cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题 npm安装方式 npm i --save-dev cross-env ...
- 为什么hexo预览功能总是间歇性失效?
个人主题:yilia 有的文章可以正常截断,有的文章不行. 开始我以为这是hexo的一个小bug,但是后来通过查阅GitHub和知乎等网站发现这完全是由于我自己的粗心造成的…手动滑稽 hexo pag ...
- PRTG测试！
http://www.paessler.com/prtg. 我的效果图:
- copy与mutableCopy的区别总结
1.不可变类型(不管是集合还是非集合),copy结果,不产生新对象,浅拷贝:不可变类型(不管是集合还是非集合),mutableCopy结果,产生新对象,深拷贝.2.可变类型(不管是集合还是非集合),c ...
- FTP连接超时
今天程序在连接FTP服务器,突然无法连接,用Windows 的 Explorer能正常连接,但用 WebRequest.WebResponse连接时,总是抛出连接超时异常. 后查找相关资料,原因是:程 ...
- python学习：列表
列表 a = ['abc','bcd','cde','def','efg']print(a)列表的操作:增删改查 1)查:切片print(a[1:3]) #从'bcd'取到'cde',列表取值顾头不顾 ...
- sublime设置sublimeREPL-python-run current file 快捷键
弄了3个小时的快捷键,一直不能成功使用,百度上一堆一样的方法,最后FQ才找到能用的方法,真是服了. 方法: ①首选项->快捷键设置 填写如下内容: [ {"keys": [& ...