zoukankan      html  css  js  c++  java
  • iscroll在安卓高版本(6.0以上)某些机型上滑动卡顿问题的解决方法

    问题:发现公司项目移动端的分类页面在某些安卓机型上滑动时异常卡顿,而且出现卡顿的手机都是非常新的安卓手机,调试的时候发现在谷歌浏览器的手机模拟滚动时也非常卡顿

    在一段纠结异常的调试和搜索下找到了解决方法:

    使用用fixed版本的iscroll就可以了:https://github.com/claydotio/iscroll/commit/be4973786cc0ae4402d1b4b74507528d474da681

    修改了红框内的三行代码.

    引用了上面的JS后,回到谷歌模拟器测试后果然就不卡顿了,然后回访了客户,也得到了满意的答案,本来以为此事告一段落。

    然而,第二天当我在pc直接打开页面时,发现页面的click事件怎么也触发不了,瞬间感觉很尴尬,虽然移动端页面客户都是在手机上用...

    琢磨了一下解决方案,按屏幕大小加载不同版本的iscroll.js文件:

    <script type="text/javascript">
    if (screen.width<1000){
    document.write('<script type="text/javascript" src="<%=JsUrl %>inc/iscroll-fixed.js"></script>');
    }
    else{
    document.write('<script type="text/javascript" src="<%=JsUrl %>inc/iscroll.js"></script>');
    }
    </script>

    注意:</script> script的关闭标签记得加反斜杠,否则会出错哦。

    好吧,但愿此事到此已圆满解决...

    然而,事情总不会如此简单顺利,screen.width在手机端获取的宽度并不准确,这不过了两天就又有人反馈卡顿问题,

    想了一下,既然宽度判断不行,那就直接最客户端设备的判断吧,直接判断是否是手机设备不就行了:

    <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="<%=JsUrl %>inc/iscroll-fixed.js"></script>');
    }else{
    document.write('<script type="text/javascript" src="<%=JsUrl %>inc/iscroll.js"></script>');
    }
    })();
    </script>

  • 相关阅读:
    Android进阶篇系统缓存(一)
    Android提高篇自定义Menu(二)
    Android进阶篇Canvas Bitmap
    Android进阶篇分析伪3D旋转
    Android进阶篇捕获app错误信息
    Android进阶篇Service和广播
    Android进阶篇清除WebView的缓存
    Android进阶篇Parcelable包裹类
    Android进阶篇GestureDetector初探
    Android进阶篇下拉刷新
  • 原文地址:https://www.cnblogs.com/webwangjie/p/10200129.html
Copyright © 2011-2022 走看看