vue实现页面无限滚动

Posted 2023-05-21 qijiangforever

        <div id="load2" class="infinite-list" v-infinite-scroll="load"
            style="overflow:auto; display: flex;flex-wrap: wrap;justify-content: center;" 
            >
            <el-card v-for="item in tableData" class="infinite-list-item" style="margin-top:10px;width:50%; height:200px" :key="item.id">
                <!-- title -->
                <div style="font-weight:bold; color: blue"><a href="/markDown" >item.name</a></div>
                <!-- content -->
                <div style="height:120px">
                    <p >item.content</p>
                </div>

                <!-- author time -->
                <div style="width:100%">
                    <i class="el-icon-user"></i>
                    <span> item.user </span>
                    <i class="el-icon-time" style="margin-left:14px"></i>
                    <span> item.time </span>
                    <i style="margin-left:14px" class="el-icon-files"></i>
                    <span>item.id</span>
                </div>
            </el-card>
        </div>
    </div>

 

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: ""
    
  

喜欢的点个赞❤吧！