纯Vue 原生JS JQuery 三种方式实现无限滚动到底部加载更多

原生js实现思路

需要三个高度:scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、scrollTop(滚动条滚动距离)、clientHeight(窗口可视范围高度)。当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。

scrollHeight:通过 document.documentElement.scrollHeight 、document.body.scrollHeight 可以获取;
scrollTop:通过window.pageYOffset 、 document.documentElement.scrollTop 、 document.body.scrollTop 可以获取;(window.scrollY也可以,只是ie根本不支持。)
clientHeight:通过window.innerHeight 、 document.documentElement.clientHeight 、 document.body.clientHeight 可以获取;
下面我先附上我的大致测试结果图(页面代码和测试表格数据最后附上)

纯Vue 原生JS JQuery 三种方式实现无限滚动到底部加载更多_第1张图片
从第一行数据可以看出来,2000(content)+2*2(border)+20(margin-top)=2024才是全部内容。故var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); 。
第二行数据,window.pageYOffset 不支持ie8;另外查询其他文档得知,document.documentElement.scrollTop 和 document.body.scrollTop 只会生效一个;window.scrollY也是一样的功能,但是兼容性比第一个还差(点此查看)。故var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;。
第三行数据:显而易见,数字小的那个才是窗口可是区域高度。故var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);。

所以最后的js代码如下:

window.onscroll= function(){
    //文档内容实际高度(包括超出视窗的溢出部分)
    var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
    //滚动条滚动距离
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //窗口可视范围高度
    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
    
    if(clientHeight + scrollTop >= scrollHeight){
        console.log("===加载更多内容……===");
    }
}

jquery的实现方式

代码如下:

<script>
    $(window).on("resize scroll",function(){
             
        var windowHeight = $(window).height();//当前窗口的高度             
        var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离            
        var docHeight = $(document).height(); //当前文档的高度 
        console.log(scrollTop, windowHeight, docHeight);
        //当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度  
        //换句话说:(滚动条滚动的距离 + 窗口的高度 = 文档的高度)  这个是基本的公式  
        if (scrollTop + windowHeight >= docHeight) { 
            console.log("===加载更多数据===");
        }
    });
</script>

测试页面代码:

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
* {
    margin: 0;
    padding: 0;
}
.scroll{
    margin-top:  20px;
    border: 2px solid #00f;
    height: 2000px;
}
</style>
</head>
<body>
<div class="scroll">
    <br><br><br><br><br><br><br>
    sdhfiahdifashdifhid
    <span id="js_con"></span>
</div>
<script>
    window.onscroll= function(){
        var str = '';
        // str += window.scrollY+",";//ie不支持。
        str += "("+document.documentElement.scrollHeight+","+document.body.scrollHeight+"),";
        str += "("+window.pageYOffset+","+document.documentElement.scrollTop+","+document.body.scrollTop+"),";
        str += "("+window.innerHeight+","+document.documentElement.clientHeight+","+document.body.clientHeight+"),";
        document.getElementById('js_con').innerHTML = str;
        console.log(str);
    }
</script>
</body>
</html>

测试结果:

获取方式 chrome 66 firefox59 edge ie8
document.documentElement.scrollHeight,document.body.scrollHeight (2024,2004) (2024,2004) (2024,2004) (2024,2004)
window.pageYoffset,document.documentElement.scrollTop,document.body.scrollTop (100,100,0) (132,132,0) (94,94,0) (undefined,94,0)
window.innerHeight,document.documentElement.clientHeight,document.body.clientHeight (636,636,2004) (619,619,2004) (628,628,2004) (undefined,624,2004)

VUE方式加载更多

将使用 Random User API(模拟后端返回数据)。对于模仿未来项目的用户配置文件也非常有用。

获取初始用户数据
有各种实现无限滚动的 npm 包,你可以使用你的 Vue 应用程序,但其中一些可能是太繁琐了。此文中,我们将不用那些插件或包,仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能(当滚动到浏览器窗口底部时,获取一组新数据)。

在我们开始集成无限滚动之前,让我们在页面加载中获取并设置一些初始数据:

App.vue

data () {
  return {
    persons: []
  }
},
methods: {
  getInitialUsers () {
    for (var i = 0; i < 5; i++) {
      axios.get(`https://randomuser.me/api/`)
        .then(response => {
          this.persons.push(response.data.results[0]);
        });
    }
  }
},
beforeMount() {
  this.getInitialUsers();
}

注意:
Random User API 一次只会返回一个随机用户数据,为了获得5个用户数据,需要发起五次请求。
如果您在 console 看到了五个用户数据,那就OK了!让我们通过模板中的这些数据进行迭代,然后继续:

App.vue

<template>
  <div id="app">
    <h1>Random User</h1>
    <div class="person" v-for="person in persons">
      <div class="left">
        <img :src="person.picture.large">
      </div>
      <div class="right">
        <p>{{ person.name.first }} {{ person.name.last }}</p>
        <ul>
          <li>
            <strong>Birthday:</strong> {{ formatDate(person.dob) }}
          </li>
          <li class="text-capitalize">
            <strong>Location:</strong> {{ person.location.city }},
            {{ person.location.state }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
...
</script>

<style lang="scss">
 /* Optional Styles */
 .person {
    background: #ccc;
    border-radius: 2px;
    width: 20%;
    margin: 0 auto 15px auto;
    padding: 15px;

    img {
      width: 100%;
      height: auto;
      border-radius: 2px;
    }

    p:first-child {
      text-transform: capitalize;
      font-size: 2rem;
      font-weight: 900;
    }

    .text-capitalize {
      text-transform: capitalize;
    }
  }
</style>

实现无限滚动逻辑
现在你在此的目的…无限的滚动! 在组件的方法中,您需要创建一个名为scroll()的新函数,并将其加载到mounted()生命周期方法中。

这个scroll()方法应该有一个简单的条件来计算页面的底部,判断它为true或false,并执行一些操作。我们将利用文档对象的documentElement.scrollTop,documentElement.offsetHeight属性和窗口的innerHeight属性来确定是否滚动到底部:

window.onscroll = () => {
  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

  if (bottomOfWindow) {
    // Do something, anything!
  }
};

在这种情况下,让我们添加一个GET方法,使用Axios从随机用户API中获取另一个随机用户。

methods: {
  ...,
  scroll (person) {
    window.onscroll = () => {
      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

      if (bottomOfWindow) {
        axios.get(`https://randomuser.me/api/`)
          .then(response => {
            person.push(response.data.results[0]);
          });
      }
    };
  },
},
mounted() {
  this.scroll(this.person);
}

此功能只会在用户滚动到页面底部时发起服务请求,并向人员数组添加一个新的随机“用户”。此时,您应该可以无限滚动…并每次看到新的“用户”。

你可能感兴趣的:(vue)