在JQuery移动中滚动

Question

我正在使用JQuery Mobile创建一个应用程序，它需要同时支持iOS和Android。 （我正在使用PhoneGap）。长页面上的滚动默认是否工作，或者是否需要设置我的div以支持滚动。如何在iOS上滚动不同于Android设备？

此外，当用户滚动到页面底部以检索更多内容时，是否有办法使ajax调用？

任何帮助表示赞赏。

Answer 1

如果你浏览器窗口溢出，滚动应该会自动发生。对于无限滚动，你可以尝试http://www.infinite-scroll.com/。

如果您使用的是jQuery Mobile的listview，您可能需要在向dom添加更多列表视图项以调用过滤行为和样式后调用刷新事件。

Answer 2

1） jQuery Mobile 1.1.0使用浏览器的本地滚动功能，因此在每个支持的平台上看起来很自然。然而

jQuery的手机确实需要以下伪页面结构：

<div data-role="page"> 
    <div data-role="header"> 
     ... 
    </div> 
    <div data-role="content"> 
     ... 
    </div> 
    <div data-role="footer"> 
     ... 
    </div> 
</div> 

如果按照这个结构，你越添加到data-role="content"部分，时间越长，页面会。

2）您可以设置一个事件处理程序scroll事件来检测用户滚动和看多远了网页的用户：

//you don't want to set a bunch of AJAX requests at once, 
//so set a flag so only one will go off at a time 
var ajaxOK = true; 
$(window).on('scroll', function() { 
    var yDistance = $('html, body').scrollTop(); 

    //here you can check how far down the user is and do your AJAX call 
    if ((yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)) { 
     //the user is within 150px of the bottom of the page 
     if (ajaxOK === true) { 
      ajaxOK = false; 
      $.ajax({ ... }); 
     } 
    } 
}); 

然后在AJAX调用回调函数您设置了ajaxOK = true;，以便当用户再次滚动到底部时，它会触发。

这里的if/then声明中scroll事件处理快速击穿：

(yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150) 

1. (yDistance + $(window).height())：滚动距离加上视口的高度，找到该网页的Y的底部坐标。
2. ($.mobile.activePage.children('.ui-content').height() - 150)：当前页面减去150px缓冲区的高度，使用户可以在150px获取和