我正在用 html5-css-js 做 phonegap 项目。
在这个项目中,我使用 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>
任何人都可以告诉我如何摆脱这个问题?
谢谢。
更新:滚动.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 文件夹。
所以。帮助请我的朋友。