【问题标题】:Infinite scrollling with jquery-mobile使用 jquery-mobile 无限滚动
【发布时间】:2013-04-17 08:46:11
【问题描述】:

我在我的网站上使用无限滚动,想在我的移动网站上使用它,但是,一旦我包含 jquery-mobile,它就会停止工作。

没有它就可以正常工作。 有什么指点吗?

详情: 我正在使用 Paul Irish 的无限卷轴。 初始化似乎没有给出任何错误,但同时它不会加载下一页(当我到达页面底部时不会进行ajax调用)。

我已经建立了一个裸骨网站here

【问题讨论】:

  • 什么无限卷轴? jQuery 移动版?你做了什么来解决这个问题?
  • 能不能把你的html和代码显示在后面???
  • @Borsel 添加了详细信息
  • 我可以告诉您 jQuery Mobile 在您的网站上无法正常工作。 Ajax 加载器显示在主页上,除非您自己打开它,否则将意味着 jQM 加载错误。

标签: jquery jquery-mobile jquery-plugins infinite-scroll


【解决方案1】:

我知道为时已晚,但迟到总比没有好。
您可以使用以下 setInfiniteScroll() 函数在页面上设置无限滚动。您可以直接在文档就绪函数中调用该函数或复制函数代码

$(document).ready(function(){
    setInfifniteScroll(scrollingDivId); // Here instead of scrollingDivId you can pass window object
});

Paulirish 无限滚动 js 有一些预定义的算法来计算下一页 url,如果你的 url 不匹配,那么它不会调用下一页。因此,我修改了网址以调用下一页。
在这里您为第一页加载内容,然后无限滚动将从第二页开始工作。请注意,您为每一页都维护了一个特定的路径。下面给出的示例将 ?page=pageNumber 附加到我的网址。

function setInfifniteScroll(scrollingDivId){
    $('#scrollingDivId').infinitescroll({
        state: {
           currPage: 2 ,
           isDestroyed: false,
           isDone: false     
       },  
       loading: {
          finishedMsg: "<em>No more content to load. You have reached to end.</em>",
          img: "image/loader.gif",
          speed: 'fast',
          msgText: "<em>Loading the next set of content...</em>",
          delay  : 1
       },
       navSelector      : "#navId",
       nextSelector     : "#navId a",
       itemSelector     : ".itemselector", // it is element class to catch from your response
       debug            : false,
       dataType     : 'html',
       path: function(pageNumber) {
          var url = $("#navId a").attr("href");
          pageNumber = parseInt(url.substring(url.lastIndexOf("page=")+5, url.length)) + 1;
          $("#navId a").attr("href","nextPageUrl_append with?page=" + pageNumber);
          return url;
       },
    }, function(newElements, data, url){
       // You can perform operations on data
    });
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-08-17
    • 2016-09-10
    • 2016-04-05
    • 2012-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多