JSON数组的无限滚动

Question

通过此代码，我得到了JSON数组的前2个结果。 如何通过滚动“加载更多”？

   function suchen() {

      var suche = document.getElementById("mysearch").value;

      $.ajax({
          url: 'http://XXX.de/?apikey=XXX&search=' + suche + '&callback=?',
          type: "GET",
          dataType: 'json',
          success: function daten (response) {

              $( 'ul#suche li' ).remove();
              var i = 0;
              response.forEach(function(data) {

                  if(i >= 2)  
                      return false;

                  $('ul#suche').append('<li class="item-content"><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');
                  i++;

              })
          }
      });
   }

如何通过滚动加载下一个（例如3-4）项目？

Answer 1

在此之前，我要提到的是，如果您在选择器中使用id ，则无需指定节点类型。

我的意思是使用$('#suche')代替$('ul#suche')

---

当涉及到无限滚动时，您绝对应该在ajax调用中指定项目数量以获取所需的精确块。 也许指定from和amount ，如果你的API提供了一种可能性。

像这样：

var from = 0
var amount = 2

var callApi = function (from, amount) {
  $.ajax({
    url: 'http://XXX.de/?apikey=XXX&search=' + suche + '&from' + from + '&amount=' + amount + '&callback=?',
    success: function (response) {
      response.forEach(function(data) {
        $('#suche').append(
          '<li class="item-content">' +
            '<div class="item-inner">' +
              '<div class="item-title">' + data.title + '</div>' +
            '</div>' +
          '</li>'
        );
      });

      // increase from on each call
      from += amount;
    }
  });
};

// call it
callApi(from, amount);

然后，您需要添加scroll eventListener，并且当最后一个元素出现在窗口画布上时，再次调用它。

var lastChild, lastChildPosition, bottomPosition, bottomPosition

$(document).on('scroll', function (e) {
  lastChild = $('#suche li:last-child');
  lastChildPosition = lastChild.scrollTop();

  scrollTop = $(this).scrollTop();
  bottomPosition = scrollTop + $(window).height();

  // call it again
  if (bottomPosition > lastChildPosition) {
    callApi(from, amount);
  }
})

Answer 2

非常感谢你。 我尝试根据您的想法使用Wordpress构建一个版本：

 function suchen_api(lastindex) {


  var suche = document.getElementById("mysearch").value;
  var offset = lastindex;
  var showposts = 2;


  $.ajax({
 url: 'http://XXX.de/?apikey=XXX&search=' + suche + '&offset=' + offset + '  &showposts=' + showposts + '&callback=?',
 type: "GET",
 dataType: 'json',
 success: function(response){

    response.forEach(function(data) {

 $('ul#suche').append('<li class="item-content"><div class="item-inner"><div class="item-title">' + data.title + '</div></div></li>');

 myApp.hideIndicator(); // Preloader geht aus

 $$('.infinite-scroll-preloader').remove();
    })
 }
 });

 }



 function suchen() {

 $( '#suche li' ).remove();

 var startindex = 0;

suchen_api(startindex);

 }


 // on Scroll

 $$('.infinite-scroll').on('infinite', function () {

  var startindex = $("ul#suche li").length;

  suchen_api(startindex);

  })

只有一个问题。 有时它告诉我最后一个加倍。 你有想法吗？