1

我已经使用 SplitView - http://asyraf9.github.com/jquery-mobile/ - （并且似乎使用 ScrollView 组件）和 jQuery Mobile 实现了一个 WebApp。一切正常...

在面板中，我有一个元素列表，当滚动到列表末尾时应该动态添加元素。在 iPhone 上，我不使用 SplitView，而是使用 iScroll - http://cubiq.org/iscroll - 和以下代码来实现这一点（并且它正在工作）。

HTML：

<div data-role="panel" data-id="menu" data-hash="crumbs" style="z-index: 10000;" id="Panel">
    <div data-role="page" id="Root" class="Login" onscroll="console.log('onscroll');">
        <div data-role="content" data-theme="d" onscroll="console.log('onscroll');">
            <div class="sub">
                <ul data-role="listview" data-theme="d" data-dividertheme="a" class="picListview" id="PortfolioList">
                    <!-- Content added dynamically -->
                </ul>
            </div>
        </div>
    </div>
</div>

Javascript：

var defaultIScrollOptions = { 
    useTransition: true, 
    onScrollStart: function() { 
        this.refresh();
    }, 
    onScrollEnd: function() { 
        if (this.elem && this.id) { 
            possiblyDisplayNextDocuments(this.y, this.elem, this.id); 
         } 
    }
};
iScrolls.push(new iScroll(document.getElementById("searchResults").parentNode, defaultIScrollOptions));

但是在使用 SplitView 时，我真的不知道要绑定侦听器的事件和元素，也不知道如何获取滚动位置。我已经尝试了几种组合，但都没有取得好的效果。最好的是以下：

$("#PortfolioList").scrollstop(function(event) {
    console.log("scrollstop: "+$("#PortfolioList").scrollTop());
});

我的问题是：我是否使用了正确的事件监听器（因为它已经触发了滚动动画仍在使用中）以及如何获得滚动位置？

4

1 回答 1

0

不要使用滚动视图插件。它的越野车。对 iOS phonegap 应用程序和 android 使用 iscroll。它适用于两者。
要检测滚动并将新元素加载到列表中，请监听 iscroll 的 'onScrollMove' 事件。
在 iscroll-wrapper.js 添加这个-

 options.onScrollMove = function(){
      that.triggerHandler('onScrollMove', [this]);
    };

然后在您的代码中将事件处理程序附加到 onScrollMove 事件并处理在其中添加新行。
onScrollMove 将在您滚动时触发。
在处理程序中，您可以使用类似的东西找到列表中有多少行以及哪一行位于视口顶部

 iscrollScrollEventHandler:function(event){
    var contentDiv= $('div:jqmData(id="main") .ui-page-active div[data-role*="content"] ul li' );
    var totalItemsonList =   contentDiv.length;

    var cont =$('div:jqmData(id="main") .ui-page-active div:jqmData(role="content")');

    var itemToScrollOn =  totalItemsonList - x; // x is the item no. from the top u want to scroll on. u need to keep updating i guess
    var docViewBottom = $(cont).scrollTop() + $(cont).height();
    var itemOffset = $(contentDiv[itemToScrollOn]).offset();
    if(itemOffset){
        var elemTop = itemOffset.top;
        if (elemTop <= docViewBottom){
            event.data.callback();
        }
    }
}

并在回调中添加代码以添加新行。希望有帮助。

于 2012-02-17T13:57:52.063 回答