2012-02-17 54 views
1

我已经使用SplitView - http://asyraf9.github.com/jquery-mobile/ - (并且似乎使用ScrollView组件)和jQuery Mobile一起实现了WebApp。一切工作正常...使用SplitView获取面板的滚动位置(jQuery Mobile)

在面板中我有一个元素的列表,当滚动到达列表的末尾时应该动态添加元素。在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()); 
}); 

我的问题是:我在用正确的事件监听器(因为它已经触发althgough滚动动画仍然在使用),我如何获得滚动位置?

回答

0

不使用scrollview插件。它的越野车。针对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(); 
     } 
    } 
} 

顶部和回调的代码添加到添加新行。希望有所帮助。

+0

感谢您的快速回答。 iScroll的问题在于性能。列表可能会变得很长,然后iScroll在touchstart上保持缓慢。或者有什么我可以做的iScroll的性能问题? – Chagemei 2012-02-17 15:00:20