android - 在 JQuery 移动版中滚动

Question

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

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

感谢任何帮助。

Answer 1

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

不过，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; 以便当用户再次滚动到底部时触发。

下面是 scroll 事件处理程序中的 if/then 语句的快速分解:

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

1. (yDistance + $(window).height()):滚动距离加上视口(viewport)高度，找到页面底部的 Y 坐标。
2. ($.mobile.activePage.children('.ui-content').height() - 150):当前页面的高度减去缓冲区150px 这样用户就可以到达 150px 并且 AJAX 调用将发生