私は StackOverflow が初めてで、これが私の最初の質問です。何か間違ったことをしている場合はすみません。
私の質問は、そのページが load() メソッドを使用して動的に読み込まれたページの複数の div で iScroll 4 を動作させる方法です。
したがって、それをより単純なものに分解するには:
page.html という別のページがあります
<html>
<body>
<ul data-iscroll="scroller">
..lots of data..
</ul>
<ul data-iscroll="scroller">
..lots of data..
</ul>
</body>
</html>
次に、私のindex.htmlページには、すべてのライブラリを含む通常のヘッダータグがあり、正常にロードされています(実際にindex.htmlページにリストがある場合-> iScrollが正常に機能するため、機能することはわかっています。リストが動的にロードされます)
私のindex.htmlの本体は
<body>
<div data-role="page>
<div data-role="header" data-position="fixed">
<h3>header</h3>
</div>
<div data-role="content" id="content">
<!-- always empty - data will be loaded here -->
</div>
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div>
</div>
</body>
ページは次の方法でコンテンツに読み込まれます (すべてを表示できるため、これも機能します)
$("#content").load("page.html",function(){
$("#content").trigger('create');
});
そして、あなたも知っているように、私の含まれているライブラリは
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<!-- jScroll -->
<script src="iscroll.js" type="text/javascript"></script>
<script src="jquery.mobile.iscrollview.js" type="text/javascript"></script>
Chromeを使用して要素を検査すると、すべてのデータが表示され、すべてがそこにありますが、<ul>
期待どおりに2つが別々にスクロールしません。私が間違っていることを誰かが知っていますか?
PS。python -m SimpleHTTPServer 8013
また、これは携帯電話用であるため、PhoneGap による Ripple エミュレーターを使用して実行し、画面の解像度などをテストする単純なサーバー上で実行しています。