2012-02-17 10 views
1

私はSplitView-http://asyraf9.github.com/jquery-mobile/を使用してWebアプリケーションを実装しています(これはScrollViewコンポーネントを使用しているようです)。すべて正常に動作します...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で
はonScrollMoveイベントにイベントハンドラをアタッチし、その中に新しい行を追加扱うコードの中で、その後this-

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

を追加します。
スクロールするたびに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がタッチスタートで遅くなることがあります。それとも、iScrollのパフォーマンス上の問題でできることはありますか? – Chagemei

関連する問題