jqueryウェイポイント無限スクロールが動作しない

ウェイポイントを使用してdiv要素の単純な無限スクロールを実装しようとしています。私はチュートリアルに従い、非常に簡単なマークアップを考え出しましたが、うまくいきません。提案がありますか？jqueryウェイポイント無限スクロールが動作しない

コード：

<!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>

出典

2016-09-25 Katia Budnik

あなたが最後に属性class="infinite-more-link"とhref="/next/page"として<a>タグを追加する必要があり、次のよう

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

そして、あなたはを準備しなければなりませんWaypointがサーバーからデータを取得するための

<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に新しく読み込まれた項目が追加されます。

出典

2016-12-19 07:47:17

jqueryウェイポイント無限スクロールが動作しない

答えて

関連する問題