iScroll для нескольких страниц
Я делаю проект phonegap с html5-css-js.
В этом проекте я использую iscroll swipe для проблемы жестов смахивания между страницами.
на моей первой странице мой iscroll работает и прокручивает всю страницу вниз.
Но когда я пролистываю вторую страницу, моя вторая страница выглядит статичной. Он не идет вниз и не показывает данные, не двигается.
Вот код, который я использую;
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div class="frame">
<div id="pageWrapper">
<div id="pageScroller">
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
Кто-нибудь может сказать мне, как я могу избавиться от этой проблемы?
Благодарю.
ОБНОВЛЕНИЕ: scroll.js
document.addEventListener("orientationchange", updateLayout);
// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;
var myScroll = new iScroll('pageWrapper', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
lockDirection: true});
updateLayout();
function updateLayout() {
var currentPage = 0;
if (wrapperWidth > 0) {
currentPage = - Math.ceil( $('#pageScroller').position().left / wrapperWidth);
}
wrapperWidth = $('#pageWrapper').width();
$('#pageScroller').css('width', wrapperWidth * 4);
$('.page').css('width', wrapperWidth - 40);
myScroll.refresh();
myScroll.scrollToPage(currentPage, 0, 0);
}
page3Scroll = new iScroll('wrapper', {hScrollbar: false, vScrollbar: false, lockDirection: true });
и я не мог поставить iscroll js из-за ограничений.
Итак, я не ел JS папки.
Так. Помогите пожалуйста мой друг.
2 ответа
Я нашел это решение в документации по iscroll4.
"iScroll необходимо инициализировать для каждой области прокрутки, которая вам нужна. Количество iScrolls, которое вы можете иметь на любой отдельной странице, не ограничено, если не указано в памяти устройства / процессоре. Тип и длина содержимого влияют на число. из iScrolls вы можете использовать одновременно."
Я надеюсь, что это помогает кому-то.
Попробуйте инициализировать / обновить функцию после события 'pageshow', так как в iScroll есть проблемы со свойством display:none.
Проверьте мое подробное объяснение здесь: /questions/28037435/prokruchivaemyij-spisok-otskakivaet-k-nachalu-iscroll-effekt-rezinovoj-lentyi/28037453#28037453
Например:
$('#<id-of-your-jqm-page>').on('pageshow', function() {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
});