web app开发利器 - iscroll4 解决方案
发布日期:2021-09-08 01:44:50 浏览次数:34 分类:技术文章

本文共 2630 字,大约阅读时间需要 8 分钟。

  • 存在即是道理,iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容,
  • 这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。
  • 幸运的是移动webkit提供了一种强大的硬件加速的CSS属性,这个属性可以用来模拟这个缺失的功能,Iscroll从这里开始了前进之路,但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难
  • 兼容万恶的IE6一样,作者希望通过写一个控件,让所有web浏览器支持这种滚动,于是iscroll4应运而生。

在解决了兼容性的问题之外,它还提供了需求许多交互的解决方案,如:

    (1)缩放(Pinch/Zoom)

    (2)拉动刷新(Pull up/down to refresh)

    (3)速度和性能提升

    (4)精确捕捉元素

    (5)自定义滚动条

IOS5 已经能够支持区域滚动了。但是andriod4 还是不行..

overflow:scroll;  -webkit-overflow-scrolling:touch;

 

已知的兼容bugs

 

区域滚动

  • 安卓的2x. 元素不支持 overflow:scroll (android自带浏览器) 4.x以上都支持
  • ios 5以下好像也不支持

固定定位:

  • 话说iphone很先进,但就是不支持position:fixed, 真奇葩

实际项目开发中使用iscroll遇到的问题:

大概说下解决的方案,你不一定遇到,遇到了至少有个参考~

  • iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动,但操作起来很不灵敏
  • 在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有响应
onBeforeScrollStart : function(e){ e.preventDefault(); },    这一行,iSroll禁止了事件的默认行为,导致select,option,textarea等元素无法点击。     解决方法也很简单,只需做一下判断,如下: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(),默认的事件就不会被屏蔽了

 


 

  • 往iscroll容器内添加内容时,容器闪动的bug                              (实际遇到了,已解决)
    • 做上拉加载更多内容的时候,肯定需要把新的内容插入到容器内,这时发现有时容器会出现闪动,一开始认为是insert进去的内容太多,后来又觉得是不是因为里面布局用了float的原因导致重新渲染,最后通通排除
    • has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
    • has3d = false
    • 和在配置iscroll时,useTransition设置成false就可以了(useTransition默认是false的)。

 


 

 

  • 过长的滚动内容,导致卡顿和app直接闪退 (实际遇到了,已解决)
    • 说白了iscroll都是用js+css3实现的,对浏览器的消耗肯定是可观的,避免无限制的内容加载本身就是web产品应该避免的。
    • 假如无可避免,我们可以尽量减低iscroll对浏览器内存的消耗
    • 1)不要使用checkDOMChanges。虽然checkDOMChanges很方便,定时检测容器长度是否变化来refresh,但这也意味着你要消耗一个Interval的内存空间
    • 2)隐藏iscroll滚动条,配置时设置hScrollbar和vScrollbar为false。
    • 3)不得已的情况下,去掉各种效果,momentum、useTransform、useTransition都设置为false

 


 
在手机中做滑动条,有几百条下啦列表的是时候,上下滑动爆卡(实际遇到了,已解决)
  • 检查原因发现跟布局有很大的关系,布局的子元素li都用了绝对定位,去掉就OK了,有此可见定位也是会影响能行滴

 


 

左右滚动时,不能正确响应正文上下拉动                                  (实际遇到了,已解决)

  • 在做时 ,假如这个幻灯片模块只是你页面的一部分,你还需要上下拉动页面去浏览其它内容时,你的手指在这个模块上做上下拨动时,恐怕会没有反应。原因还是和问题1一样的,因为屏蔽了默认事件。
  • 完美的解决方法是没有的,如果把 e.preventDefault() 去掉,幻灯片的滚动效果就会大打折扣,而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上,大家还是自己选择吧。在技术上解决不了的问题,我认为还是多和产品和UI沟通比较好,共同协商一个良好的方案。

 


 

  • 4.1.9版本中,mouseout事件,2次触发end事件                        (实际遇到了,已解决)

            呵呵,这个我改了源码,添加了一个flag处理的,具体在

_start 方法中that.swipe = false;_mouseout 方法中        _mouseout:function (e) {            var t = e.relatedTarget;                if(this.swipe){                return;            }

 


  • 4.1.9版本中,preventDefault没有妥善处理,导致svg不可选的问题 (实际遇到了,已解决)

如图把  打字累了

 


 

附上:

 

下章开始源码分析,敬请期待~~

转载地址:https://blog.csdn.net/weixin_34310369/article/details/85568290 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:build setting
下一篇:向二维数组传递参数的三种方法

发表评论

最新留言

不错!
[***.144.177.141]2024年02月28日 19时10分09秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

用matlab仿真mmc环流抑制器,一种基于准PR控制原理的MMC阀组环流抑制方法 2019-04-21
oracle 排序的分析函数,Oracle SQL:使用分析排序函数 2019-04-21
oracle direct for hdfs xi下载,ORACLE连接HDFS有个专项的解决方案 2019-04-21
java 403怎么抛出_java – 如何在Spring MVC中返回403禁止? 2019-04-21
java jsch工具类_Java工具集-JSch连接远程服务器工具类 2019-04-21
cmd背景变红1003无标题_怎样修改cmd中文字的大小、颜色和背景颜色呢 原来是这样的... 2019-04-21
php rand() 重复,php – mt_rand()给我总是相同的数字 2019-04-21
php taglib.php,thinkphp5 taglib自定义标签教程 2019-04-21
java常用包类 array,Java中的StringBuffer和数组Arrays以及常用类型的包装类 2019-04-21
ctf常见php,CTF中常见的PHP伪协议 2019-04-21
php语言冒泡法,PHP 冒泡排序法 2019-04-21
php如何数组去重复,PHP如何去除数组重复元素? 2019-04-21
java转换ab的值,查看新闻/公告--[整理]Java将AB1234形式的16进制字符串转换为10进制数值,考虑字节序的影响.... 2019-04-21
ui php h5,画出自己的UI组件的详情 2019-04-21
linux服务文件编写,linux编写systemd下服务脚本 2019-04-21
hdfs linux 目录是否存在,Linux中判断hdfs文件是否存在 2019-04-21
linux学习需要什么基础,学linux需要什么基础? 2019-04-21
linux vim编辑kconfig 无法wq,Linux-4.9.2内核在mini2440上的移植(三)——编译环境测试... 2019-04-21
高斯勒让德在c语言中的程序,c语言:用递归方法编写程序,求n阶勒让德多项式的值... 2019-04-21
c语言单片机电子时钟,新人求个51单片机的电子时钟汇编语言(C语言的还没学到)... 2019-04-21