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

约定不等于承诺〃 2024-03-27 14:51 90阅读 0赞

**效果图如下：**  
可以看到随着不断的滚动，页面组件的数量不断的加载。  
其实加载的是后端返回的数据，因为涉及隐私，没有给显示出来。  
利用懒加载，可以防止大量渲染造成卡顿降低用户体验。  
![请添加图片描述][1329c87d232e4fe7996d2d6441532754.gif]  
**页面的动态加载这块可以看上一篇文章：**  
[**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: ""
        }
      }

喜欢的点个赞❤吧！

[1329c87d232e4fe7996d2d6441532754.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e750b2d8791b497285347eea4ee07794.png
[Vue_]: https://blog.csdn.net/qq_38161040/article/details/128871661