有一项目需要用到滚动效果,最后选择了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, );
})

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

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

jquery-mobile的页面跳转和iscroll之间的兼容解决方法的更多相关文章

  1. jquery mobile多页面跳转等,data-ajax="false" 问题,

    当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是采用ajax方式来加载网站的,如果你需要跳到另一个页面,需要在a标签加上 ...

  2. JQuery Mobile的页面

    1.JQuery Mobile的页面结构如下图: page:是在浏览器中显示的页面 header:创建页面上方的工具栏(常用于标题和搜索按钮) content:定义了页面的内容,比如文本, 图片,表单 ...

  3. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  4. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  5. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  6. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  7. Jquery Mobile通过超链接跳转后CSS样式不起作用的解决办法

    Jquery Mobile中的超链接默认是采用AJAX跳转的,ajax获取到页面的内容之后,就直接替换当前页面的内容了,它只是单纯的获取页面的HTML代码,并不会再去下载引用的CSS代码和JS代码,因 ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. jQuery Mobile动态刷新页面样式

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...

随机推荐

  1. Hightcharts设置Y轴最大最小值

    有两种方法: 1:是在控件初始化时预设, yAxis: [{ max:}] 2:在程序运行中动态更新设置 thChart.yAxis[].update({ min: , max: });

  2. Objective-C的新特性

    Objective-C的新特性 苹果在今年的 WWDC2012 大会上介绍了大量 Objective-C 的新特性,能够帮助 iOS 程序员更加高效地编写代码.在不久前更新的 Xcode4.4 版本中 ...

  3. Implement strStr()

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  4. Linux_文件打包,压缩,解压

    一.压缩命令 文件格式:*.gz 命令:gzip 文件名 (ps:不能压缩目录,切压缩后不保留原文件) 压缩前 -rw-r--r--. 1 root root 315 Sep 6 21:03 df.t ...

  5. curl测试网页响应时间

    连接时间: curl -s -o /dev/null -w "%{time_connect}\n" http://www.joinpay.com 传输时间: curl -s -o ...

  6. php标签云制作——数据表的结构和查询方法

    1.数据表的结构: 创建建两张数据表,结构如下: 标签tag表: 文章mood表: 其中mood表中的tag字段,以tag表的id字段+“,”+tag表的id字段, 2.查询方法: 例如:如果需要某篇 ...

  7. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

  8. webform连接ACCESS数据库

    1.先建立一个名叫mydb.accdb的access数据库 2.他它复制到webform中,放在App_Data文件夹下. 3.在App_Code文件夹下建好封装语句,查询方法,连接语句,其中stud ...

  9. 【HDU1914 The Stable Marriage Problem】稳定婚姻问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1914 题目大意:问题大概是这样:有一个社团里有n个女生和n个男生,每位女生按照她的偏爱程度将男生排序, ...

  10. zju(8)串口通信实验

    1.实验目的 1.学习和掌握linux下串口的操作方法以及应用程序的编写: 二.实验内容 1.编写EduKit-IV实验箱Linux操作系统下串口的应用程序,运行时只需要将串口线的一端连接到开发板的c ...