使用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沟通比较好,共同协商一个良好的方案。
基本的心得就是这些拉,希望对大家有帮助。(转)
iScroll 4.2.5 中文API
http://www.gafish.net/api/iScroll.html
使用iscroll4可能会遇到的问题(转:记录)的更多相关文章
- history显示历史操作记录,并显示操作时间
在查看历史的操作记录有两种方式1.在用户的目录下的.bash_history文件中[root@node1 ~]# vi ~/.bash_history rebootvi /etc/sysconfig/ ...
- 前端学HTTP之摘要认证
前面的话 上一篇介绍的基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与SSL配合使用 摘要认证与基本认证兼容,但 ...
- [杂谈]冲NOIP一等奖。。
唉不想多说了. 真是一段“传奇”的经历啊. 还是那句话..“是的我上次什么都没说就走了...”这次也一样. 我还是太单纯的以为我们是肯定能够参加北大的夏令营的..然而结果真是意料之外啊. 本来我以为我 ...
- git提交时支持文件名大小写的修改
在windows环境下,git提交文件时,默认对文件名大小写不敏感,若修改了文件名字的大小写,可能会导致提交时没有记录,文件名修改不成功.网上搜集了几种解决方法,现总结下: 1. 修改git conf ...
- 【asp.net】Linux 部署 asp.net core 项目
Net sdk官网LINUX配置地址:https://www.microsoft.com/net/core#windows 参考:http://www.07net01.com/2016/08/1638 ...
- WinForm开发之取送货管理2
写的有点慢,但都是一步步操作的,希望这些能成为以后宝贵的财富,话不多说,续上次取送货基本信息管理之产品分类管理,下面进行增删改的编写. 增加产品分类管理信息记录,双击[新增]按钮(其新增可让用户在Te ...
- Snort - manual 笔记(一)
Chapter 1 Snort Overview This manual is based on Writing Snort Rules by Martin Roesch and further wo ...
- NHibernate实战详解(一)领域模型设计
关于NHibernate的资料本身就不多,中文的就更少了,好在有一些翻译文章含金量很高,另外NHibernate与Hibernate的使用方式可谓神似,所以也有不少经验可以去参考Hibernate. ...
- 【转】敏捷开发 Scrum 总结
转:http://www.open-open.com/lib/view/open1330413325514.html 最近把之前学习 Scrum 的资料整理为一篇文档,在接下来的团队和项目开发中,根据 ...
随机推荐
- append与after
apend与apendTo就如同after与insertAfter,表达意思相同,表达不同.A.after(B)=B.insertAfter(A).apend在元素里面添加,after在元素外面添加. ...
- 随心所欲~我也做个集合遍历器吧(自己的foreach,委托的威力)
感觉微软在面向对象三大原则中,封装性运用的最为突出,它会将一些复杂的算法,结构,功能代码进行封装,让程序员在使用时十分得心应手,如关键字里的foreach和labmda表达式里的Foreach等等,今 ...
- Matrix(多线程dp)
Matrix Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- I Hate It(线段树)
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Dynamics CRM 2013 初体验(1):系统的安装
最近收到Microsoft的Dynamics CRM 2013 beta测试邀请,终于让我掀开了它神秘的面纱.自从去年的Dynamics CRM 2012 December补丁包发布后,系统就添加了很 ...
- QML Performance
1) Limit JavaScript a) inline JavaScript: 内联的JavaScript方法; 1. 将js方法放置在Element内部; 2. 尝试将语句写在一行内; e. ...
- SGU 506.Subsequences Of Substrings
求一个串S有多少子串subS满足s是subS的子序列.len(S)<=100000, len(s)<=100 直接扫一遍... ------------------------------ ...
- 利用 onload 事件监控跨站资源
用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报, ...
- poj 1966 Cable TV Network 顶点连通度
题目链接 给一个图, n个点m条边, 求至少去掉多少个点可以使得图不再联通.随便指定一个点为源点, 枚举其他点为汇点的情况, 跑网络流, 求其中最小的情况. 如果最后ans为inf, 说明是一个完全图 ...
- SQL Server 数据库所有者
1. 数据库所有者应当永远是 sa 用户 2. 改变数据库的所有者 alter authorization on database :: databaseName to sa; -- 这一句话把数据库 ...