1

JQMobile フレームワークを使用する HTML ページが複数あります。これらのページ内で、iScroll を使用してネイティブのスクロール効果を作成していますが、すべて正常に動作します。

iScroll で JQM ページ遷移を使用すると問題が発生します。これは ajax を介してロードされるため、DOM が変更された後に高さと幅を正しく計算できるように、新しいページで iScroll を更新する必要があることを知っています。

私はこれを調べて、コードを試しました (refresh() と破棄と再作成を試みました) が、動作するように見えません。

以下のコード！

<div data-role="page">
    <div data-role="header">

    </div><!-- /header -->

    <div data-role="content">
    <div id="wrapper">
        <div id="scroller">
            <p>Page content goes here.</p>
            <a href="jquery_mobile_2.html"  data-transition="slide">Page 2</a>
        </div>
    </div>
    </div><!-- /content -->

    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a data-ajax="false" href="javascript:void(0);" onClick="homepage();"><img width="34px" height="34px" src="images/home_IMG_v2.png" /><!--<span class="nav">Home</span>--></a></li>
                <li><a data-ajax="false" href="Guide.html" class="ui-btn-active ui-state-persist"><img width="35px" height="33px" src="images/guide_IMG_v2.png"><!--<span class="nav">Guide</span>--></a></li>
                <li><a data-ajax="false" href="TaxCalculator.html"  /><img width="76px" height="34px" src="images/calculator_IMG_v2.png" /><!--<span id="calc" class="nav">Calculator</span>--></a></li>
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

refresh() の使用

var myScroll;

function loaded() {

    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});

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

}


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

iScroll の破棄と再作成

var myScroll;

function loaded() {

    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});

   setTimeout(function() {      
        myScroll.destroy();   
        myScroll = null;
        myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});  
   }, 100);

}


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
4

3 に答える 3

0

domchanges の後、iscroll を更新する必要があります

$('#videotagisc').iscrollview("refresh");

これはsetTimeoutを使用することを意味します 

setTimeout(function(){
 $('#videotagisc').iscrollview("refresh");
},100);
于 2014-04-08T07:29:23.360 に答える
0

jqm 1.3.1 などで jqm pageshow イベントが発生したときに iScroll の初期化を呼び出してみてください。

$(document).on('pageshow', function (event, ui) {
    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
});
于 2013-04-17T13:43:53.497 に答える