Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示

效果图如下：
可以看到随着不断的滚动，页面组件的数量不断的加载。
其实加载的是后端返回的数据，因为涉及隐私，没有给显示出来。
利用懒加载，可以防止大量渲染造成卡顿降低用户体验。

页面的动态加载这块可以看上一篇文章：
Vue 动态添加和删除组件的实现，子组件和父组件的传值实例演示

下面主要讲一下动态加载的实现思路：
首先懒加载主要有两种形式，一种是不断的从后端请求返回前端，每次获取一部分数据，另一种是一次性把数据加载到前端，然后一部分一部分的展示。
本次演示的数据量不大，采用后面的方法来实现。

首先利用 axios 从后台获取数据，存储下来，并且执行一次加载组件的动作。

    // 向后台发送请求得到数据get_data(){axios.get('http://127.0.0.1:10086').then(response => {this.response_data=response.data;// 默认执行一次数据加载this.load_data();})// 请求失败抛出异常在控制台.catch(function (error) {console.log(error);});}

然后对滚动进行监听 window.addEventListener('scroll', this.rolling); 当检测滚动条滚到底部时，加载数据。
当滚动过的距离 + 可视区的高度 >= 滚动条长度时，就相当于滚动到了底部。

    rolling () {// 滚动过的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 当前可视区的高度var clientHeight = document.documentElement.clientHeight// 滚动条的长度var scrollHeight = document.documentElement.scrollHeight// 当滚动过的距离+可视区的高度>=滚动条长度时，就相当于滚动到了底部if (scrollTop + clientHeight >= scrollHeight) {this.load_data();}}

下面是主要的代码

  methods:{// 数据加载load_data(){for(var i=0; i<6; i++){this.index++;if(this.index<Object.keys(this.response_data).length+1){this.album.push(this.response_data[this.index.toString()]);}}},// 向后台发送请求得到数据get_data(){axios.get('http://127.0.0.1:10086').then(response => {this.response_data=response.data;// 默认执行一次数据加载this.load_data();})// 请求失败抛出异常在控制台.catch(function (error) {console.log(error);});},rolling () {// 滚动过的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 当前可视区的高度var clientHeight = document.documentElement.clientHeight// 滚动条的长度var scrollHeight = document.documentElement.scrollHeight// 当滚动过的距离+可视区的高度>=滚动条长度时，就相当于滚动到了底部if (scrollTop + clientHeight >= scrollHeight) {this.load_data();}}},mounted() {// 加载数据this.get_data();// 添加滚动监听window.addEventListener('scroll', this.rolling);},data(){return{album: [],index: 0,response_data: ""}}

喜欢的点个赞❤吧！

Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示相关推荐

c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
datagridview滚动条自动滚动_掘金上摸鱼的新发现，无限滚动(infinitescroll)
前言上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: ‍‍‍‍‍‍‍‍‍‍掘金官网 ...
中奖人js滚动效果_jQuery实现中奖播报功能（让文本滚动起来）简单设置数值即可...
在很多场景中,我们需要使用到中奖信息播报,或者一些文本信息循环滚动播报,在结合实际的开发中,然后也百度查询了相关的知识点,现在送上jQuery实现文本滚动. 1:html代码文件相关使用说明也在页面 ...
当前元素_90行代码，15个元素实现无限滚动
前言在本篇文章你将会学到: IntersectionObserver API 的用法,以及如何兼容. 如何在React Hook中实现无限滚动. 如何正确渲染多达10000个元素的列表. 无限下拉加 ...
不要在网站上无限滚动！
人们在浏览网站的时候是喜欢用"无限滚动",还是喜欢点击""或"查看更多"?无限滚动消除了分页的需要--分页是将数字内容分离到不同页面的过程. ...
无限滚动重置服务器,简单无限滚动的实现
在使用elementUI组件库的时候,用到了无限滚动这个功能.我没有看源码,直接在网上学习了下实现的思路,然后自己手动编码以下.在此总结下. 假设页面上有一个盒子容器,容器内有一些子元素.容器的高度是 ...
使用RecycleView实现无限滚动的日历
最终效果项目地址一.无限滚动实现在RecyclerView.Adapter的getItemCount()方法中返回Integer.MAX_VALUE,使用RecycleView的scrollTo ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示

Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示相关推荐

最新文章

热门文章