锐客网

  1. 首页 > 睿知 > it技术 > >

iscroll在安卓高版本（6.0以上）某些机型上滑动卡顿问题的解决方法

IT知识解决方法问题的解决高版本

大鹏一日同风起，扶摇直上九万里。这篇文章主要讲述iscroll在安卓高版本（6.0以上）某些机型上滑动卡顿问题的解决方法相关的知识，希望能为你提供帮助。
问题：发现公司项目移动端的分类页面在某些安卓机型上滑动时异常卡顿，而且出现卡顿的手机都是非常新的安卓手机，调试的时候发现在谷歌浏览器的手机模拟滚动时也非常卡顿
 
在一段纠结异常的调试和搜索下找到了解决方法：
使用用fixed版本的iscroll就可以了：https://github.com/claydotio/iscroll/commit/be4973786cc0ae4402d1b4b74507528d474da681

iscroll在安卓高版本（6.0以上）某些机型上滑动卡顿问题的解决方法

文章图片

修改了红框内的三行代码.
引用了上面的JS后，回到谷歌模拟器测试后果然就不卡顿了，然后回访了客户，也得到了满意的答案，本来以为此事告一段落。
然而，第二天当我在pc直接打开页面时，发现页面的click事件怎么也触发不了，瞬间感觉很尴尬，虽然移动端页面客户都是在手机上用...
琢磨了一下解决方案，按屏幕大小加载不同版本的iscroll.js文件：
< script type="text/javascript">
if (screen.width< 1000){
document.write(\'< script type="text/javascript" src="https://www.songbingjia.com/android/< %=JsUrl %> inc/iscroll-fixed.js"> < \\/script> \');
}
else{
document.write(\'< script type="text/javascript" src="https://www.songbingjia.com/android/< %=JsUrl %> inc/iscroll.js"> < \\/script> \');
}
< /script>
注意：< \\/script> script的关闭标签记得加反斜杠，否则会出错哦。
好吧，但愿此事到此已圆满解决...
然而，事情总不会如此简单顺利，screen.width在手机端获取的宽度并不准确，这不过了两天就又有人反馈卡顿问题，
想了一下，既然宽度判断不行，那就直接最客户端设备的判断吧，直接判断是否是手机设备不就行了：
 
【iscroll在安卓高版本（6.0以上）某些机型上滑动卡顿问题的解决方法】 < script type="text/javascript">
(function browserRedirect(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == \'ipad\';
var bIsIphone = sUserAgent.match(/iphone os/i) == \'iphone os\';
var bIsMidp = sUserAgent.match(/midp/i) == \'midp\';
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == \'rv:1.2.3.4\';
var bIsUc = sUserAgent.match(/ucweb/i) == \'web\';
var bIsCE = sUserAgent.match(/windows ce/i) == \'windows ce\';
var bIsWM = sUserAgent.match(/windows mobile/i) == \'windows mobile\';
var bIsandroid = sUserAgent.match(/android/i) == \'android\';
if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
document.write(\'< script type="text/javascript" src="https://www.songbingjia.com/android/< %=JsUrl %> inc/iscroll-fixed.js"> < \\/script> \');
}else{
document.write(\'< script type="text/javascript" src="https://www.songbingjia.com/android/< %=JsUrl %> inc/iscroll.js"> < \\/script> \');
}
})();
< /script>

    推荐阅读


    上一篇：[PWA] Customize the Splash Screen of a PWA built with create-react-app

    下一篇：Android监听view的attached或detached状态