1

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

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

我对此进行了研究并尝试了代码（尝试了 refresh() 并销毁和重新创建），但看不到让它工作，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 -->

使用刷新（）

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

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

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

在 domchanges 之后你需要刷新 iscroll

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

这不起作用意味着使用setTimeout 

setTimeout(function(){
 $('#videotagisc').iscrollview("refresh");
},100);
于 2014-04-08T07:29:23.360 回答
0 
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);
});
于 2016-05-06T08:44:31.303 回答