iScroll 5 не работает, когда 2-я страница должна быть прокручиваемой

0

Я использую apache cordova 2.2

      jquery 1.7.2
      jquery mobile 1.4.3
      iscroll 5 (Matteo Spinelli ~ http://cubiq.org/)

У меня есть следующий index.html:

<div data-role="page" id="id1">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id2">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

<div data-role="page" id="thisshouldscroll">
    <div data-role="header" data-position="fixed">
    <div id="buttondiv" data-role="navbar">
                    some buttons
    </div>
    </div>
    <div data-role="content" id="id4">
        <!-- need scrollable list here -->
        <div id="wrapper" >
          <div id="scroller">

          </div>
        </div>        
    </div>
    <div data-role="footer" data-position="fixed">
       <div id="bottombuttondiv" data-role="navbar">
           some buttons
       </div>
    </div>
</div>

<div data-role="page" id="id5">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id6">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

Я показываю прокручиваемую страницу id = "thisshould scroll" следующим образом:

$.mobile.changePage( "#thisshouldscroll", { transition: "slideup"} );  
buildScrollingData();
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

В другом месте я определил:

function displayScrollingData(){
     var contentToAppend="";

     //loop web service data add certain data to contentToAppend with
         contentToAppend = contentToAppend +
                          str1 + "<BR>" +
                          str2 + "<BR>" +
                          str4 + "<BR>" +
                          str3 + "<BR><BR>";

     $("#scroller").append(contentToAppend);

}

function buildScrollingData(){
      //call a web service, put results in an array
      dispayScrollingData()
}

У меня также есть:

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}

Данные не прокручиваются, и мне интересно, как моя инициализация каким-то образом прикручивается.

page id = "thisshouldscroll" отображается 2-м в моем приложении.

Кто-нибудь знает правильный порядок инициализации iScroll 5, когда его вторая страница должна иметь возможности прокрутки?

Если инициализация в порядке, может ли кто-нибудь предположить, что мне не хватает?

  • 0
    Используйте как минимум jquery 1.8.3 с JQM 1.4. Также вам может понадобиться добавить элементы перед инициализацией iscroll, так как это добавляет дополнительную разметку к прокручиваемому div.
  • 0
    я добавил jquery 1.8.3 и переместил инициализацию myScroll сразу после $ ("# scroller"). append (contentToAppend); в displayScrollingData (), но это не сработало
Показать ещё 4 комментария
Теги:
cordova
jquery-mobile
iscroll

1 ответ

2

Для Iscroll 5 у меня есть настройка в следующем порядке. Если вам нравится прокрутка на нескольких страницах, дайте myscroll и wrapper уникальное имя для этой страницы. Документ готов для тестирования Цели, поэтому используйте требуемый процесс JQM при инициализации страницы. Также как примечание, поскольку обертка имеет верхние и нижние пиксели <div data-role="content"... на самом деле не нужна для работы скроллера.

 var myScroll;

 $(document).ready(function(){ 

        myScroll = new IScroll('#wrapper',
                        {
                            scrollX: false, 
                            scrollY: true
                            ,click:true // open click event
                            ,scrollbars: false 
                            ,useTransform: true
                            ,useTransition: false
                            ,probeType:3,
                            mouseWheel:true,
                            bindToWrapper: true
        });

});


 function initscroll() {

    setTimeout(function () {
            myScroll.refresh();
        }, 1000);
    }

обновите прокрутку, как вам нужно, в окне "Страницы" или "После получения данных" в список

initscroll()

Я также использую следующий HTML и добавляю данные к ID (listview)

<div data-role="content" id="main" class="custom_content">
    <div id="wrapper" class="wrapper">
       <div id="scroller">
             <ul data-role="listview" id="listview">
             </ul>
        </div>
      </div>
</div>

Демо Игнорируйте длинный код в скрипте, который подключен к Iscroll, прокрутите вниз, пока не увидите ////JQM STUFF

http://jsfiddle.net/z50cg1jf/

Обновление Nov 2014 - для Android Webviews, проверенного на (Kitkat, используя Webchrome) API 19

Если вы столкнулись с плохими характеристиками прокрутки на телефоне или планшете Android, удалите

probeType: 3

и установите переход к истинному

useTransition: true

Также включите Аппаратное ускорение в приложении Android для веб-поиска.

Искрол 5 теперь должен летать. Я потратил часы, пытаясь улучшить производительность Iscroll на веб-просмотре, и случайно попробовал это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню