1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应
这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是,在iscroll4源码里面找到这一行,

onBeforeScrollStart: function (e) { e.preventDefault(); }

然后把它改成:
    onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target? e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }

这样只要你touch的元素是 select || option || input || textarea时,它就不会执行e.preventDefault(),默认的事件就不会被屏蔽了。

如果你有其他不想被屏蔽的元素,可以自己修改,不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要,它是iscroll进行流畅滚动的基础,不要随便的把它去掉,否则你会发现滚动起来很卡顿。

2.往iscroll容器内添加内容时,容器闪动的bug

我在做上拉加载更多内容的时候,肯定需要把新的内容插入到容器内,这时发现有时容器会出现闪动,一开始认为是insert进去的内容太多,后来又觉得是不是因为里面布局用了float的原因导致重新渲染,最后通通排除。

其实病灶在于iscroll使用了太为先进的CSS3属性,可能web webkit对这些属性的支持力度还是不够好。

涉及的两个属性是  translate3d 和 TransitionTimingFunction,或许是这两个属性在列表长度改变时会影响到渲染,所以导致页面闪动,解决办法就是找到源代码的,

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改成:
     has3d = false

和在配置iscroll时,useTransition设置成false就可以了(useTransition默认是false的)。

这样做有一点瑕疵就是滚动起来和原来比没那么流畅了(原来的效果真的是可以媲美原生app的),但是假如你不对比的话,是看不出来了。

在效果和体验上面选择,我更看重体验。

不过如果你符合下面的条件,我还是不建议你修改成我这样:

1)即使你不修改,无论你怎么往iscroll容器里面插内容,它都不会闪动,这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片,很多时候会出现闪动bug

2)如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟,但是在手机上的safari完全没有问题,所以如果你不是用phonegap之类的框架开发混合app,你不需要担心这个问题。

3)只针对android,因为android的webkit暂时还不支持translate3d,iscroll会自动选择不用。

3.过长的滚动内容,导致卡顿和app直接闪退

说白了iscroll都是用js+css3实现的,对浏览器的消耗肯定是可观的,避免无限制的内容加载本身就是web产品应该避免的。

假如无可避免,我们可以尽量减低iscroll对浏览器内存的消耗

1)不要使用checkDOMChanges。虽然checkDOMChanges很方便,定时检测容器长度是否变化来refresh,但这也意味着你要消耗一个Interval的内存空间

2)隐藏iscroll滚动条,配置时设置hScrollbar和vScrollbar为false。

3)不得已的情况下,去掉各种效果,momentum、useTransform、useTransition都设置为false

4.左右滚动时,不能正确响应正文上下拉动

在做这种效果时 ,假如这个幻灯片模块只是你页面的一部分,你还需要上下拉动页面去浏览其它内容时,你的手指在这个模块上做上下拨动时,恐怕会没有反应。原因还是和问题1一样的,因为屏蔽了默认事件。

完美的解决方法是没有的,如果把 e.preventDefault() 去掉,幻灯片的滚动效果就会大打折扣,而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上,大家还是自己选择吧。在技术上解决不了的问题,我认为还是多和产品和UI沟通比较好,共同协商一个良好的方案。

转载自:http://www.cnblogs.com/lostyu/p/3907256.html

关于IScroll使用中的常见问题与解决方案的更多相关文章

  1. 《PDF.NE数据框架常见问题及解决方案-初》

    <PDF.NE数据框架常见问题及解决方案-初> 1.新增数据库后,获取标识列的值: 解决方案:    PDF.NET数据框架,已经为我们考略了很多,因为用PDF.NET进行数据的添加操作时 ...

  2. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  3. 自学华为IoT物联网_06 智慧家庭物联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_06 智慧家庭物联网常见问题及解决方案 1. 家庭中遇到的问题 2.1 华为智慧家庭概念的发展历程 2.2 华为智慧家庭的解决方案架构 智慧家庭主要 ...

  4. 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案 1. 1 能源工业--油田业务面临的三大挑战 故障处理不及时: 部分油田开采难道大.机械故障较多.现场发生的 ...

  5. 自学华为IoT物联网_04 车联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_04 车联网常见问题及解决方案 1.1 可以预见的车联网未来 车辆对车辆.车辆对道路.车辆对网络通信 车辆对外发送车辆状态信息 周边环境信息发送给车 ...

  6. 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案 本文从以下六项公共事业,看看物联网的解决方案: 停车问题 路灯管理问题 消防栓管理问题 井盖管理问题 水表管 ...

  7. ARKit从入门到精通(11)-ARKit开发常见问题及解决方案

    转载请注明出处:ARKit从入门到精通(11)-ARKit开发常见问题及解决方案 本文主要介绍ARKit开发过程中一些常见问题 1.ARKit框架无法导入问题 2.ARKit运行黑屏或者白屏问题:Un ...

  8. Qt的安装和使用中的常见问题(简略版)

    对于喜欢研究细节的朋友,可参考Qt的安装和使用中的常见问题(详细版). 目录 1.引入 2.Qt简介 3.Qt版本 3.1 查看安装的Qt版本 3.2 查看当前项目使用的Qt版本 3.3 查看当前项目 ...

  9. Qt的安装和使用中的常见问题(详细版)

    对于太长不看的朋友,可参考Qt的安装和使用中的常见问题(简略版). 目录 1.引入 2.Qt简介 3.Qt版本 3.1 查看安装的Qt版本 3.2 查看当前项目使用的Qt版本 3.3 查看当前项目使用 ...

随机推荐

  1. 七、angularjs 倒计时

    使用定时器时离开页面需要清除定时器,清除的方法有两种分别针对页面有缓存和没有缓存 1.页面有缓存 2.页面没有缓存 angularjs倒计时首先需要注入:$interval 60s倒计时 vm.sec ...

  2. PHP两种实现无级递归分类的方法

    /** * 无级递归分类 TP框架 * @param int $assortPid 要查询分类的父级id * @param mixed $tag 上下级分类之间的分隔符 * @return strin ...

  3. PRINCE2考试用什么语言?

    PRINCE2考试可用英语之外的阿拉伯语.中文.日语.马来西亚/印度尼西亚语.泰国语.越南语.菲律宾语.波兰语和盖尔语等9种语言进行. PRINCE2手册目前已有英文.中文.丹麦语和日语,正在翻译成荷 ...

  4. 软工读书笔记 week2

    <程序员修炼之道>这本书后面一部分则是更深入.更具体.更细致地就程序员应该注意的事项做一些讨论,书中说的很多在过去的经历中都有较深的体会,同时也给了我很多启发.以下是一些我感悟较深的点: ...

  5. 算法day02

    算法动态演示网站 数组是有长度限制的,有类型限制 CPU计算 每次是2的32位的,32根线,支持最大是4G 数组:线性表 列表:动态表链表:存储的位置不是连续的 insert 时间复杂度是 Onapp ...

  6. mac下 IDEA 的pom下 出现 Cannot access in offline mode 问题

    在mac下 配置完maven后发现总是不能引入最新的jar包,google了好久总算找到解决办法: 默认带有work offline ,不清楚这个是干嘛用的.勾选掉 了就行了.

  7. MySQL复制报错(Slave failed to initialize relay log info structure from the repository)

    机器重启以后,主从出现了问题,具体报错信息: Slave failed to initialize relay log info structure from the repository 解决方案: ...

  8. 【 PostgreSQL】工作中常用SQL语句干货

    接触gp数据库近一年的时间,语法上和其他数据库还是有些许不同,工作中常用的操作语句分享给大家! -- 建表语句 create table ods.ods_b_bill_m ( acct_month t ...

  9. 微信开发——微信公众平台实现消息接收以及消息的处理(Java版)

    本文主要讲述了如何在微信公众平台实现消息接收以及消息的处理,使用java语言开发,现在把实现思路和代码整理出来分先给兄弟们,希望给他们带来帮助. 温馨提示: 这篇文章是依赖前几篇的文章的. 第一篇:微 ...

  10. DOM介绍

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...