1

SplitView（ http://asyraf9.github.com/jquery-mobile/）とjQuery Mobileを使用してWebAppを実装しました（これはScrollViewコンポーネントを使用しているようです）。すべてが正常に動作します...

パネル内に、スクロールがリストの最後に達したときに動的に要素を追加する必要がある要素のリストがあります。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

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();
        }
    }
}

コールバックで、新しい行を追加するコードを追加します。それがお役に立てば幸いです。

于 2012-02-17T13:57:52.063 に答える