Vue中实现一个无限加载列表

最新推荐文章于 2024-08-05 19:09:58 发布

weixin_30455365

最新推荐文章于 2024-08-05 19:09:58 发布

阅读量348

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenruo/p/9794083.html

版权

参考 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>