2012-02-17 87 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