Я использую 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, когда его вторая страница должна иметь возможности прокрутки?
Если инициализация в порядке, может ли кто-нибудь предположить, что мне не хватает?
Для 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
Обновление Nov 2014 - для Android Webviews, проверенного на (Kitkat, используя Webchrome) API 19
Если вы столкнулись с плохими характеристиками прокрутки на телефоне или планшете Android, удалите
probeType: 3
и установите переход к истинному
useTransition: true
Также включите Аппаратное ускорение в приложении Android для веб-поиска.
Искрол 5 теперь должен летать. Я потратил часы, пытаясь улучшить производительность Iscroll на веб-просмотре, и случайно попробовал это.