Question

我有多个使用JQMobile框架的HTML页面;在这些页面中，我正在使用iScroll创建原生滚动效果，一切正常。

当使用iScroll使用JQM页面转换时遇到问题，因为它是通过ajax加载的我知道我需要在新页面上刷新iScroll，以便它可以在DOM更改后正确计算高度和宽度。

我已经调查了这个并尝试了代码（尝试刷新（）并销毁和重新创建）但是看不到它的工作，iScroll的工作原理是它没有在页面更改时刷新（因此无法正常工作），任何想法？

下面的代码！

<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);

Answer 1

尝试在jqm pageshow事件触发时调用初始化iScroll，例如在jqm 1.3.1中：

$(document).on('pageshow', function (event, ui) {
    myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false, checkDOMChanges: true});
});

Answer 2

在domchanges之后你需要刷新iscroll

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

这不起作用意味着使用 setTimeout

setTimeout(function(){
 $('#videotagisc').iscrollview("refresh");
},100);

Answer 3

var width   = $( window ).width();
var height  = $( window ).height();
var delay = 200;
var doit;

function keop() {
    $("#wrapper").css({"height":height+"px","width":width+"px"});
    setTimeout( function(){
        myScroll.refresh() ;
    } , 200 ) ; 
}

/* < JQuery 1.8*/
window.addEventListener("load", function(){
    clearTimeout(doit);
    doit = setTimeout(keop, delay);
});

/* > JQuery 1.8*/
window.on("load", function(){
    clearTimeout(doit);
    doit = setTimeout(keop, delay);
});

Jquery移动页面转换iScroll刷新

3 个答案: