无限滚动历史记录.pushState

时间：2015-12-28 15:44:36

标签： php jquery infinite-scroll

我侮辱了另一个jQuery问题。好吧，我从我的代码开始，在这里了解我的问题：

＆＃13;
＆＃13; 
<script type="text/javascript">
jQuery(document).ready(function() {

  var current = <?php echo ($_GET['page']!='') ? $_GET['page'] : 1; ?>;
  var idp;

  $(window).scroll(function(e){
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
      current=current+1;
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }
      loadMoreContent(idp);

      history.pushState("state", "title: "+current, "index.php"+idp);
            e.preventDefault();
    }
    if($(window).scrollTop() == 0) {
      current=((current-1)<=0) ? 1 :  current-1;
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }

      loadMoreContent(idp);

      history.pushState("state", "title: "+current, "index.php"+idp);
            e.preventDefault();

    }
  });

  window.onpopstate = function(event) {
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }
        loadMoreContent(idp);
        history.pushState("state", "title: "+current, "index.php"+idp);
      };

  function loadMoreContent(position) {
      $('#loader').fadeIn('slow', function() {
        $.get("index.php"+position+" #annonceis", function(data){
          var dato = $(data).find("#annonceis");
          $("#annonceis").html(dato);
          $('#loader').fadeOut('slow', function() {
            $(window).scrollTop(60);
          });
        });
      });
  }
});
</script>
＆＃13;
＆＃13;
＆＃13;

我的问题是基于无限滚动而不是＆＃34;追加＆＃34;我使用html（）函数替换名为annonceis的div中的内容。

我的想法是，当我滚动到页面底部时，我会收到名为index.php的新页面内容？page = 1 2 3.并将de div annonceis中的旧内容替换为我用jQuery获得的新内容，但是当我滚动到底部时，我获取下一页的内容，当前页面是index.php？page = 2时通常当我滚动到底部时我必须得到index.php的内容？ page = 3但是在这里我得到index.php的内容？page = 3并立即index.php？page = 4所以页面显示index.php？page = 4.

主要思想是滚动到底部并获取下一页的内容而不是分页，但它必须关注history.pushState以用于搜索引擎优化目的，Google建议请参阅http://scrollsample.appspot.com/items和https://googlewebmastercentral.blogspot.com/2014/02/infinite-scroll-search-friendly.html

非常感谢你。

2 个答案:

答案 0 :(得分：1)

所以，你真正的分页结合无限滚动。所提供的示例正在使用.pushState()来跟踪用户使用页面Waypoints进行滚动。请注意，一旦页面X到达页面的中心点，就会触发.pushState()。

其次，如果您查看任何页面的示例源代码，您将看到它只会呈现所选页面，然后使用.scroll上的侦听器添加它或根据需要预先添加内容。

所以，在它的核心，这真的只是简单的分页。无限滚动感简单地添加在顶部以便用户体验。执行此操作的基本概述如下所示：

模型或控制器

您的PHP文件或诸如此类的，运行实际查询 - 基于易用性的类。该类将包含一个函数，用于根据请求页面获取一组帖子。 JavaScript将处理其他所有事情。

<?php

Class InfiniteScroller {

    // Set some Public Vars
    public $posts_per_page = 5;
    public $page;

    /**
    * __construct function to grap our AJAX _POST data
    */
    public function __construct() {

        $this->page = ( isset($_POST['page']) ? $_POST['page'] : 1 );

    }


    /**
    * Call this function with your AJAX, providing what page you want
    */
    public function getPosts() {

        // Calculate our offset
        $offset = ($this->posts_per_page * $this->page) - $this->posts_per_page;

        // Set up our Database call
        $SQL = "SELECT * FROM my_post_table ORDER BY post_date ASC LIMIT " . $offset . ", " . $this->posts_per_page;

        // Run Your query, format and return data
        // echo $my_formatted_query_return;

    }

}

?>

AJAX Call

接下来你需要注意的是你的前端和JavaScript，所以你的AJAX调用可以放在一个函数中，只需调用上面的方法并获取一个页面参数。

<script type="text/javascript">

function getPageResults( page = 1, arrange = 'next' ) {
    $.ajax({
        url: url;
        type: "POST",
        data: "?page=" + page,
        success: function(html) {
            /* print your info */
            if( arrange == 'prev' ) {
                $( '#myResults' ).prepend(html);
            else if( arrange == 'next' ) {
                $( '#myResults' ).append(html);
            }
        },
        error: function(e) {
            /* handle your error */
        }

    });
}

</script>

HTML视图

您的HTML非常基本，只是一个可以保存显示结果和一些创意触发器的地方。

<html>
<head>
</head>
<body>

    <div class="loadPrev"></div>

    <div id="myResults">
        <!-- Your Results will show up here -->
    </div>

    <div class="loadNext"></div>

</body>
</html>

加载您想要的页面

在基本总结中，拼图的最后一部分是根据URL中的查询字符串加载请求的页面。如果不存在查询字符串，则需要页面1.否则，请加载请求的页面。

<script type="text/javascript">

$( document ).ready(function() {

    var page = <?php echo ( isset($_GET['page'] ? $_GET['page'] : 1) ?>;
    getPageResults( page, 'next' );

});

</script>

之后，您可以为上一个和下一个触发器设置一些创意听众，并根据需要调用getPageResults()，并根据需要调用next或prev属性。

这可以在更优雅的意义上完成 - 从您提供的示例中查看JS：http://scrollsample.appspot.com/static/main.js

清理它

一旦建立了基本架构，您就可以开始更改.pushState()以及更改canonical，next和prev {{1标题项。此外，此时您可以开始生成您需要的下一个/上一个链接等。一旦您奠定了基础，它就应该全部落实到位。

答案 1 :(得分：0)

Hey Bro @LionelRitchietheManatee Finnaly我已经解决了这个问题，这是我使用过的代码。

＆＃13;
＆＃13; 
<script type="text/javascript">
jQuery(document).ready(function() {
  
  var current = <?php echo ($_GET['page']!='') ? $_GET['page'] : 1; ?>;
  var idp;
  var loaded = true;

  $(window).scroll(function(e){
    if(($(window).scrollTop() + $(window).height() == $(document).height())&&(loaded)) {
      loaded = !loaded;
      current=current+1;
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }
      loadMoreContent(idp);

      history.pushState("state", "title: "+current, "index.php"+idp);
            e.preventDefault();
    }
    if($(window).scrollTop() == 0) {
      loaded = !loaded;
      current=((current-1)<=0) ? 1 :  current-1;
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }
      
      loadMoreContent(idp);

      history.pushState("state", "title: "+current, "index.php"+idp);
            e.preventDefault();

    }
  });

  

  window.onpopstate = function(event) {
      if(current<=1)
      {
        idp = '';
      }
      else
      {
        idp = '?page='+current;
      }
        loadMoreContent(idp);
        history.pushState("state", "title: "+current, "index.php"+idp);
      };

  function loadMoreContent(position) {
      $('#loader').fadeIn('slow', function() {
        $.get("index.php"+position+" #annonceis", function(data){ 
          var dato = $(data).find("#annonceis");
          $("#annonceis").html(dato);
          $('#loader').fadeOut('slow', function() {
            loaded = !loaded;
            $(window).scrollTop(60);
          }); 
        });
      });
  }
});
</script>
＆＃13;
＆＃13;
＆＃13;

我添加了一个名为＆＃34; loading＆＃34;初始值为TRUE，加载内容时更新为FALSE状态，开始滚动时更新为TRUE状态。

我非常原始，因为解决方案并不像你那样干净，但它解决了我的问题。

无论如何，谢谢你的帮助，你是BOSS。

相关问题
最新问题