jquery-mobile的页面跳转和iscroll之间的兼容解决方法

来源：互联网发布：ipad弹钢琴软件编辑：程序博客网时间：2024/04/29 17:22

有一项目需要用到滚动效果，最后选择了iscroll插件，代码写好后chrome测试一切正常(直接查看用到滚动效果的页面以下统称当前页面)，运行APP应用一步步跳转到当前页面的时候，滚动效果和滚动条等死活出不来，然后各种调试，各种删减JS，各种调整代码，依然不行，真是恶心的要死。最后经过测试发现，如果当前页面做为应用的第一个页面展示出来的时候滚动效果就会OK。而通过JQM的页面跳转也就是jQuery.mobile.changePage()到达当前页面的时候，iscroll效果就不起作用了。由此可以想象到，在当前页面还未初始化即还未展现的时候，滚动区域DOM应该是由于某种原因并不适用于iscroll的初始化条件(可能是高度和实际高度不匹配等等原因吧，具体不太清楚)。

解决办法一：
可以在滚动区域内容发生变化之后来初始化iscroll滚动对象，所以我们可以在changePage()到当前页面之后来创建这个对象

$(".selector").on("pagecreate",function(){　　    function loaded() {        myScroll = new iScroll('wrapper',{snap:false,checkDOMChange:true,vScrollbar:true});    }    setTimeout(loaded, 20);})

解决方法二：
如果之前已经初始化过iscroll对象，我们可以用iscroll的refresh方法来刷新次对象

$(".selector").on("pagecreate",function(){　　    setTimeout(function(){              myScroll.refresh();    }, 100);})

0 0