使用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 的资料整理为一篇文档,在接下来的团队和项目开发中,根据 ...
随机推荐
- [LeetCode][Python]17: Letter Combinations of a Phone Number
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 17: Letter Combinations of a Phone Numb ...
- 怎么限制Google自己主动调整字体大小
Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明白指定字体大小,则在chrome浏览器里字体显示是12px. 近期在写代码玩的时候,我也碰到了 在FF和 ...
- iOS_词典阵列 按key分组和排序
// // main.m // SortGroup // // Created by beyond on 14-10-26. // Copyright (c) 2014年 beyond.com All ...
- ASP.NET listBbox控件用法
ListBox基本功能使用方法 2011-06-09 13:23:16| 分类: .NET/C# | 标签:listbox基本功能使用方法 |举报 |字号大中小 订阅 ListBox基 ...
- 全局通知Notification
Notification 全局通知 关于全局通知的个人理解: 即有一个发射消息的,在整个应用中任何对象都可以接受这个消息 但是无论是哪个对象接受消息,都要在这个对象结束时移除消息 简单的说 就是给对象 ...
- socket select模型
由于socket recv()方法是堵塞式的,当多个客户端连接服务器时,其中一个socket的recv调用时,会产生堵塞,使其他连接不能继续. 如果想改变这种一直等下去的焦急状态,可以多线程来实现(不 ...
- 第三条:私有化构造器或者枚举类型强化Singleton属性
1.5版本之前,我们通常实现单例模式有两种方式: 两种方法前提都是私有化构造器,然后通过不同的方式获取对象. 第一种:通过公共的静态变量获取 public class Elivs{ // 私有化构造器 ...
- 【原创】JPEG图像密写研究(二) 哈夫曼树的建立
[原创]记录自己研究的过程,仅供参考,欢迎讨论... 在根据JPEG图像文件结构读取完文件后,提取出其中DHT段,利用其中内容建立哈夫曼树,便于之后译码工作.这里需要注意的是文件中的哈夫曼表数量不固定 ...
- discuz_style_default.xml 修改
<?xml version="1.0" encoding="ISO-8859-1"?> <root> <item id=" ...
- npm使用教程(未完)
npm docs 设置镜像站 因为npmjs的官方网站,总会下载比较慢或打不开,所以通常需要设置一下镜像站来更好的安装npm库 npm install --registry http://regist ...