佛说“事物都有其两面性”,妈蛋用个破插件还能感悟出哲理。
前一天你还感慨iscroll大法好,等到今天你真正看透了这小子的真实面目,却噼里啪啦的问候创造人家小可爱的母亲害你加班,害你没时间玩王者荣耀,害你不能跟姑娘约会。
说了堆没用的,整点技术性的吧。说到iscroll首先要了解它滚动的原理是什么,看一下刚刚画的这个极简的图。
原理:外层盒子outBox设置,height:100%;width:100%;position:relative;
内层盒子innerBox设置,width:100%;position:absolute;让内容自然撑开盒子高度。
于是乎大家就能看出来了,Iscroll其实就是控制内层盒子的滚动来实现页面的滚动效果。
也就是说iscroll其实是自己模拟了浏览器的滚动效果,并不是利用手机自带浏览器的滚动,‘永远被模仿,无法被超越’用在自带浏览器上也不足为奇吧,你用橘黄色的鲜艳花朵想一下你个小团队自己做个模拟滚动效果,怎么可能会没有问题呢,兼容性怎么可能没有缺陷呢,效果怎么可能有浏览器自带滚动好呢。单纯的狗狗
描述一下遇到的问题吧
Question1:当你来了一个需求说让你在webview中添加一个长按的方法,这个webview偏偏还必须要引入iscroll,这时候你会发现一些奇怪的小问题,从new一个iscroll开始。代码是这样撸的、
可能有点绕仔细看一下接下来说的内容:其实问题就出在preventDefault里面,如果把它设置为true则安卓无法监听到自定义的长按事件,ios倒是可以,两者滚动起来还都流畅;若设置为false,则两者均可监听到自定义的长按事件,然而这时候ios的滚动却出现了卡卡卡,不流畅的问题,兼职神烦,这不相互矛盾吗,你说似不似。然后我就可劲的找办法,究其原因,窥探其灵魂,最终还是被帅气的我所发现了。
原因:笼统的说就是Android和Ios的webview对touchmove的处理方式不一样。
详细说一下解决办法:首先需要把preventDefault属性设置为false。然后单独禁止一下ios的touchmove默认事件
之后你就可以舒心的用你自定义的长按事件了。
Question2:写了这么长了,言简意赅描述一下这个问题吧,我们都知道在webview做下拉刷新和上拉加载这两个效果用的最多的可能就是利用iscroll来做了吧,但是当某个失恋无聊没有任何耐心的用户不停地不停地不停地下拉你的webview来刷新获取新数据时(你可能会问他智障吗为什么会一下下拉这破玩意,对,他就是智障,打了我们公司的客服电话投诉了这个问题,你说无奈不无奈)并且恰巧webview中存在较多的1:1,4:3等多种不同比例的图片,而且图片都是后台传过来的,这时候你会发现iscroll可能就会出现崩溃的现象!!!
原因:iscroll会先加载标签的高度来占位,当你所有图片的高度都是动态获取的并且没法固定每个版块的高度时这时候iscroll就会懵逼。
解决办法:可以用时下最流行的vue中一个叫Mint UI的组件库,这个插件用的是浏览器自带的滚动而不是模拟的,所以效果要好很多。
好了,今天先写到这吧------------------------------------------------------------------------