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>

  • 相关阅读:
    IDEA手动创建JFinal项目(404问题处理)
    php 把数字1-1亿换成汉字表述,例如 150 转成 一百五十
    模仿console自写函数打印js的对象
    每瓶啤酒2元,2个空酒瓶或4个瓶盖可换1瓶啤酒。10元最多可喝多少瓶啤酒? php
    js-Event构造函数,也许你需要
    js将金额专成每隔3位数加逗号
    js-PC版监听键盘大小写事件
    用php脚本给html中引用的js和css路径打上版本
    通过js的console优雅的将php调试信息输出
    android中加载的html获取的宽高不正确
  • 原文地址:https://www.cnblogs.com/webwangjie/p/10200129.html
Copyright © 2011-2022 走看看