jquery航点无限滚动不起作用答案

【问题标题】：jquery waypoint infinite scroll not workingjquery航点无限滚动不起作用
【发布时间】：2016-09-25 17:28:23
【问题描述】：

我正在尝试使用 Waypoints 为 div 元素实现简单的无限滚动。所以我按照他们的教程提出了非常简单的标记，但它不起作用。有什么建议？

代码：

    <!DOCTYPE html>
<html lang="en" class=" js flexbox opacity"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Infinite SCroll - test</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.waypoints.min.js"></script>
    <script src="infinite.js"></script>


    <link href="style.css" rel="stylesheet">

    <script>
        function infiniteExample() {
        var infinite = new Waypoint.Infinite({
          element: $('.infinite-container')[0]
        })
      }
    </script>
</head>
<body>



<div class="infinite-container waypoint">
  <div class="infinite-item">1</div>
  <div class="infinite-item">2</div>
  <div class="infinite-item">3</div>
  <div class="infinite-item">4</div>
  <div class="infinite-item">5</div>
  <div class="infinite-item">6</div>
  <div class="infinite-item">7</div>
  <div class="infinite-item">8</div>
  <div class="infinite-item">9</div>
  <div class="infinite-item">10</div>
<div class="infinite-item">11</div><div class="infinite-item">12</div><div class="infinite-item">13</div><div class="infinite-item">14</div><div class="infinite-item">15</div><div class="infinite-item">16</div><div class="infinite-item">17</div><div class="infinite-item">18</div><div class="infinite-item">19</div><div class="infinite-item">20</div><div class="infinite-item">21</div><div class="infinite-item">22</div><div class="infinite-item">23</div><div class="infinite-item">24</div><div class="infinite-item">25</div><div class="infinite-item">26</div><div class="infinite-item">27</div><div class="infinite-item">28</div><div class="infinite-item">29</div><div class="infinite-item">30</div><div class="infinite-item">31</div><div class="infinite-item">32</div><div class="infinite-item">33</div><div class="infinite-item">34</div><div class="infinite-item">35</div><div class="infinite-item">36</div><div class="infinite-item">37</div><div class="infinite-item">38</div><div class="infinite-item">39</div><div class="infinite-item">40</div></div>
 </div>



</body></html>

【问题讨论】：

标签： jquery infinite-scroll jquery-waypoints

【解决方案1】：

你应该添加一个<a>标签，最后带有class="infinite-more-link"和href="/next/page"属性：

<a class="infinite-more-link" href="/next/page">More</a>

完整代码如下：

<!DOCTYPE html>
<html lang="en" class=" js flexbox opacity">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Infinite SCroll - test</title>
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.waypoints.min.js"></script>
  <script src="infinite.js"></script>

  <link href="style.css" rel="stylesheet">

  <script>
    function infiniteExample() {
      var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0]
      })
    }
  </script>
</head>

<body>

  <div class="infinite-container waypoint">
    <div class="infinite-item">1</div>
    <div class="infinite-item">2</div>
    <div class="infinite-item">3</div>
    <div class="infinite-item">4</div>
    <div class="infinite-item">5</div>
    <div class="infinite-item">6</div>
    <div class="infinite-item">7</div>
    <div class="infinite-item">8</div>
    <div class="infinite-item">9</div>
    <div class="infinite-item">10</div>
  </div>

  <a class="infinite-more-link" href="/next/page">More</a>

</body>
</html>

然后您必须为航点准备/next/page 以从服务器检索数据。它将返回如下内容：

<div class="infinite-item">11</div>
<div class="infinite-item">12</div>
<div class="infinite-item">13</div>
<div class="infinite-item">14</div>
<div class="infinite-item">15</div>
<div class="infinite-item">16</div>
<div class="infinite-item">17</div>
<div class="infinite-item">18</div>
<div class="infinite-item">19</div>
<div class="infinite-item">20</div>

新加载的项目附加到infinite-container。

【讨论】：