Question

我使用jscroll作为无限滚动寻呼机。

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    padding: 20,
    nextSelector: 'div.next a',
    contentSelector: '.latest-container',
    autoTrigger: true,
    autoTriggerUntil: 1
});

这是一个非常简洁的插件，它使用我的项目autoTriggerUntil必须的。使用该方法，您可以限制内容自动加载的时间，并显示分页的“下一步”按钮。

我想要实现的是这个。

加载无限的第一组帖子（实际上是第二页）。（DONE）
在第2页之后，显示“全部加载”按钮。（DONE）
1和2都工作，但我想要做的是：点击第2页的“全部加载”后，我想要销毁限制器并回到无限视图直到最后。

我基本上需要以某种方式重新初始化它。在过去的几个小时里，我一直在弄乱间隔和其他不良做法而没有结果。

Answer 1

在挖掘之后，我推出了这个解决方案： -

首先，你需要添加一个这样的回调函数： -

$('.frontpage').jscroll({
    //your existing settings ,
    callback: function() {
      if ($('div.next a').is(":visible")) {
         $('.frontpage').jscroll.destroy();
         $('div.next a').off('click');
       }
    }
});

第二次将 onclick 属性添加到加载所有 a 标记（仅在加载所有 a 标记可见的页面中）

onclick="loadAllClick(event);"

并且处理函数应该是这样的： -

<script> var loadAllClick = function(e) { e.preventDefault(); $('.frontpage').jscroll( //your settings ); } </script>

和Here是一个完全有效的plunker样本希望这能回答你的问题

Answer 2

您可以使用$(el).off()方法和插件的callback选项。

在插件页http://jscroll.com/上测试。

它看起来像这样：

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j('div.next a'); //Your 'next' selector
    el.off()
    el.on('click',function(e){
      e.preventDefault(); // we don't want the browser to go to redirect
      // Add your code to show the rest of the comments here.
  });
}

然后以相同的方式调用bind但添加回调：

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    ...
    callback:scrollerCallback,
    autoTriggerUntil: 1
});

Answer 3

在CallBack功能中，尝试使用：

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j(document).find('div.next a');
    el.on('click',function(e){

      e.preventDefault();
      console.log("This call gets executed!");

      $j('.frontpage').jscroll({
        autoTrigger: false,
        autoTriggerUntil: false
      });

  });
}

当你这样做时会发生什么？我想你必须修改库本身才能工作，但我还不太确定......

更改选项并重新初始化

3 个答案: