【问题标题】:Kik Infinite Scrolling Using App.js使用 App.js 进行 Kik 无限滚动
【发布时间】:2017-04-11 23:05:11
【问题描述】:

我真的不明白我应该如何在我的网站中实现无限滚动功能。我理解它的目的,但也许 Trevor 对该函数的作用进行更多的技术解释将使我能够理解它并以更有效的方式实现它。此外,非常感谢您将其与网站其余部分的上下文一起使用的示例。

提前致谢,
帕尔默

【问题讨论】:

    标签: web-applications infinite-scroll kik


    【解决方案1】:

    这个问题似乎与 App.js(开源移动 UI 库)有关,而不是 Kik 浏览器和 API...

    不管怎样,下面是一个示例页面,它会在用户滚动时将项目动态加载到列表中。

    HTML:

    <div class="app-page" data-page="home">
      <div class="app-topbar">
        <div class="app-title">Title</div>
      </div>
      <div class="app-content">
        <ul class="app-list"></ul>
      </div>
    </div>
    

    JS:

    App.populator('home', function (page) {
      var pageNum = 0;
      App.infiniteScroll($(page).find('.app-list'), function (next) {
        pageNum++;
        $.ajax({
          url: 'url/to/data?page='+pageNum,
          success: function (data) {
            var list = [];
            data.items.forEach(function (item) {
              var li = $('<li>');
              //TODO: construct list item from data
              list.push(li);
            });
            next(list);
          }
        });
      });
    });
    

    【讨论】:

    • 非常感谢您为我制作了这个示例!只需要一点澄清。将 li 附加到列表的目的是什么(而不是直接将其插入到 html 中)?另外,next 是一个函数吗(如果是,它在哪里定义以及它是做什么的)?
    • 这里有一个错误:page 既是函数参数,又被声明为局部变量。我认为它只是作为一个计数器变量,其中一个应该重命名!
    • 不错,已修复
    猜你喜欢
    • 2016-04-02
    • 2019-07-05
    • 2012-10-04
    • 2015-06-03
    • 2017-10-09
    • 2018-10-27
    • 2016-10-17
    • 2021-07-20
    • 2017-08-14
    相关资源
    最近更新 更多