资讯专栏INFORMATION COLUMN

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

褰辩话 / 3383人阅读

摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112098.html

相关文章

  • 使用iscroll4可能遇到问题(记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是...

    keelii 评论0 收藏0
  • 使用iscroll4可能遇到问题(记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了,解决的方法是...

    paney129 评论0 收藏0
  • Vue 实践过程中几个问题

    摘要:前言本篇是我在使用过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑。小结上面就是我分享的几个小问题,希望大家看了能够有所收获另明年准备去上海,如果小伙伴的公司有坑,可以联系一下我。 前言 本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家。 本文首发于我的个...

    DevTalking 评论0 收藏0
  • 使用taro框架将手百小程序成h5总结

    摘要:前言历时一周,终于成功兼容了和小程序,在此使用的框架,遇到的问题在此记录一下。四表单手百小程序组件是支持模式,直接可以实现省市区选择,但是框架不支持,需要用的功能来实现省市区的选择。 前言 历时一周,终于成功兼容了h5和小程序,在此使用的taro框架,遇到的问题在此记录一下。 一、环境判断 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不...

    svtter 评论0 收藏0
  • MySQL中浮点型字符型问题

    摘要:总结如下在记录价格和重量数字字段的时候,尽量不要使用浮点型,浮点数坑多比如浮点型是不能判断相等的,最好是采用整型,业务上要显示小数时,读取出来再除以相应的位数,比如元,应存储,读取出来时,用来显示。 一 问题描述 今天遇到一个刷数据的需求,是修改产品的重量(字段类型为float),修改了产品的重量之后,是需要记录到日志表中的(字段类型为varchar),表结构如下:临时刷数据表: CR...

    fireflow 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<