layim在ios上的一些问题

ladycat 2021-11-01 原文

layim1.0.9中在ios上上下滑会出现卡顿的情况；在消息列表和好友列表及消息详情都会有

原因是layui.js里面关于设备判断的方法，先判断为“mac”，在判断“ios”;

代码如下:

os: function(){ //底层操作系统
  if(/windows/.test(agent)){
    return \'windows\';
  } else if(/linux/.test(agent)){
    return \'linux\';
  } else if(/mac/.test(agent)){
      return \'mac\';
  } else if(/iphone|ipod|ipad|ios/.test(agent)){
    return \'ios\';
  }
}()；
页面都是用fixed的会导致吸顶，所以卡住;
新版的layui.js已经改变了这个顺序，

os: function(){ //底层操作系统
  if(/windows/.test(agent)){
    return \'windows\';
  } else if(/linux/.test(agent)){
    return \'linux\';
  }else if(/iphone|ipod|ipad|ios/.test(agent)){

    return \'ios\';
  }

else if(/mac/.test(agent)){
      return \'mac\';
  }
}()；


并且在moblie.js里面有专门监听ios的touch事件，

s.ios && i.on("touchmove", function (e) {
    var a = i.scrollTop();
    a <= 0 && (i.scrollTop(1), e.preventDefault(e)), this.scrollHeight - a - i.height() <= 0 && (i.scrollTop(i.scrollTop() - 1), e.preventDefault(e))
})


这样可以解决卡顿的问题，但是这种情况就有有一种在顶部或者底部滑第一下的时候，先是滚动1，不吸顶，需要滑两次才滚动，会让用户有用自己没滑到的错觉；

研究之后的解决办法
可以换成新版本，如果不换，就自己写一个判断设备的方法然后监听事件；
优化滑两次的方法，判断用户手指滑动方向，在document.addEventListener("touchend",function (e) {}）方法里手动让页面滚动，不过不太流畅；
另外，ios中输入框获取焦点时，键盘会弹起遮盖住输入框解决办法：
判断设备为ios监听事件即可，不过如果用户切换输入法还是会被挡住，需要用户自己滑出来

$(document).on("focus",".layim-chat-send input" ,function() {
    setTimeout(function(){
        document.body.scrollTop = document.body.scrollHeight;
    },300);
});