0

我正在使用需要同时支持 iOS 和 Android 的 JQuery Mobile 创建应用程序。（我正在使用PhoneGap）。默认情况下在长页面上滚动是否有效，或者我是否需要设置我div的 s 以支持滚动。iOS 上的滚动与 Android 设备有何不同？

另外，当用户滚动到页面底部以检索更多内容时，有没有办法进行 ajax 调用？

任何帮助表示赞赏。

4

2 回答 2

2

1) jQuery Mobile 1.1.0 使用浏览器的原生滚动，因此在每个支持的平台上看起来都很自然。

然而，jQuery Mobiles 确实需要以下伪页面结构：

<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并发生 AJAX 调用
于 2012-05-07T22:06:58.367 回答
0

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

如果您使用 jquery mobile 的列表视图，您可能需要在将更多列表视图项添加到 dom 后调用刷新事件，以使过滤行为和样式正常工作。

于 2012-05-07T21:56:25.650 回答