使用iscroll4可能会遇到的问题(转:记录)

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沟通比较好,共同协商一个良好的方案。

基本的心得就是这些拉,希望对大家有帮助。(转)

使用iscroll4可能会遇到的问题(转:记录)

时间: 2024-12-27 23:08:36

使用iscroll4可能会遇到的问题(转:记录)的相关文章

Iscroll4使用心得 (转)

最近做web app项目做到心血来潮,有太多经验想记录,太多细节想分享.今日把使用iscroll4 一直困扰了很久的问题研究解决了,很高兴决定把使用的心得写出来,方便大家参考,不要再走太多的弯路. iscroll4 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,虽然插件不大但是效果十分好.是web app开发必备的控件之一. iscroll4官网 : http://cubiq.org/iscroll-4 为什么要用iscroll4 因为在IOS5之前,web

数据库存数据时,逻辑上防重了为啥还会出现重复记录?

在很多异常情况下,比如高并发.网络糟糕的时候,数据库里偶尔会出现重复的记录. 假如现在有一张书籍表,结构类似这样 +----+--------------+ | id | name | +----+--------------+ | 1 | 世界简史 | +----+--------------+ 在异常情况下,可能会出现下面这样的记录 +----+--------------+ | id | name | +----+--------------+ | 1 | 世界简史 | | 2 | 人类简

Django之路 - 项目实战之<教育行业CRM开发>

本节内容 业务痛点分析 项目需求讨论 使用场景分析 表结构设计 业务痛点分析 我2013年刚加入老男孩教育的时候,学校就一间教室,2个招生老师,招了学生后,招生老师就在自己的excel表里记录一下,每月算工资时,就按这个表来统计招生提成, 后来学校大了点,教室变成了3间,招生老师变成了4个人,招的学生也开始多了起来,不过大家依然是招了学生就纪录在自己的excel里,但问题开始出现了,我们的招生多是通过网络qq聊天在线咨询,好多客户需要聊很久才能转化成学员,经常会出现一个客户跟一个招生老师聊过后,

IScroll的诞生和缺点

转自http://lhdst-163-com.iteye.com/blog/1239784 iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架.旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari.Android默认浏览器.safari.chrome.firefox5+.opera11+.IE9+及其他webkit核心浏览器.最新版本为iscroll4. 官方网站:iscroll4 iscroll的用武之地 1

LoadRunner - 结果分析 / Result Analysis

LoadRunner 最重要也是最难理解的地方--测试结果的分析.其余的录制和加压测试等设置对于我们来讲通过几次操作就可以轻松掌握了.针对 Results Analysis 我用图片加文字做了一个例子,希望通过例子能给大家更多的帮助.这个例子主要讲述的是多个用户同时接管任务,测试系统的响应能力,确定系统瓶颈所在.客户 要求响应时间是1 个人接管的时间在5S 内. 2.系统资源: 2.1 硬件环境: CPU:奔四2.8E 硬盘:100G 网络环境:100Mbps 2.2 软件环境: 操作系统:英文

6 分析以及监视场景

6 分析以及监视场景在运行过程中, 可以监视各个服务器的运行情况(DataBase Server.Web Server 等).监视场景通过添加性能计数器来实现.这一章非常的重要,确定系统瓶颈全靠它了.下面重点讲讲需要添加那些计数器,以及那些计数器代表什么意思.由于Win2000 Professional.Server 以及Advanced Server 提供的计数器不完全相同, 这里我们讨论将以Server 为基准.监视场景需要在Run 视图中设置然后, 出现添加计数器的对话框其他的操作就和控制

cocos2d-js 开发常见问题

1. 编译android版本可能出现的问题记录 如果编译的时候报错.出现/platforms/android-14/arch-arm/usr/lib/crtend_so.o: Unknown EABI object attribute 44或者R_ARM_THM_CALL against symbol  xxx,然后编译不过的问题 解决方案: 在android.mk上加个LOCAL_ARM_MODE := arm 出现原因: android的编译默认指令是: 编译命令始终是compile++ t

敏捷开发-Scrum 实战

最近把之前学习 Scrum 的资料整理为一篇文档,在接下来的团队和项目开发中,根据项目的情况引入 Scrum 的一些实践,提高团队成员之间的协作能力和项目的交付质量. 参考资料: <轻松Scrum之旅-敏捷开发故事>.<敏捷无敌> 硝烟中的Scrum 和 XP 火星人敏捷开发手册 Scrum-Checklists 维基百科:http://zh.wikipedia.org/wiki/Scrum Scrum 工具 禅道 JIRA+GreenHopper Scrum 中的角色 Scrum

Java Hashtable 的使用

<THINKING IN JAVA>以及网上资料整理: Java中的Hashtable的用法: Java包含两个类,java.util.Hashtable 和java.util.HashMap,它们提供了一个多种用途的hashtable机制.Hashtable和HashMap对象可以让你把一个key和一个value结合起来,并用put() 方法把这对key/value输入到表中.然后你可以通过调用get()方法,把key作为参数来得到这个value(值).只要满足两个基本的要求,key和val