运用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沟通比较好,配合协商一个优越的计划。

基础的心得就是这些拉,愿望对人人有协助。(转)

    原文作者:CodeMan
    原文地址: https://segmentfault.com/a/1190000009695905
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞