Получить положение прокрутки панели с помощью SplitView (JQuery Mobile)

Я реализовал веб-приложение с помощью SplitView — http://asyraf9.github.com/jquery-mobile/ - (и это, кажется, использует компонент ScrollView) вместе с 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());
});

Мой вопрос: использую ли я правильный прослушиватель событий (поскольку он уже срабатывает, хотя анимация прокрутки все еще используется) и как мне получить позицию прокрутки?


scroll-position jquery-mobile jquery-events
person Chagemei    schedule 17.02.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

не используйте плагин scrollview. это глючит. Используйте isscroll как для приложений телефонной связи iOS, так и для Android. Он отлично работает в обоих случаях.
Чтобы обнаружить прокрутку и загрузить новые элементы в список, прослушайте событие 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();
        }
    }
}

и в обратном вызове добавьте код для добавления новых строк. надеюсь, это поможет.

person ghostCoder    schedule 17.02.2012
comment
Спасибо за быстрый ответ. Проблема с iScroll заключается в производительности. Списки могут быть довольно длинными, а затем iScroll будет работать медленно при сенсорном запуске. Или я могу что-нибудь сделать с проблемой производительности iScroll? - person Chagemei; 17.02.2012