VUE前端界面在iOS中遇到的坑

段时间，公司用前端做了一个微型图片生成界面，通过考虑，选择使用vue多页面进行编写，在界面编写完成之后，本地浏览器进行测试，发现一切都很顺利，然后嵌入到APP端进行联合测试。前期，界面在Android上运行比较顺利，个人以为没什么问题，但是当页面嵌入到iOS中，问题暴露了出来，主要体现在三点上：

1、界面使用了瀑布流滑动效果，但是在iOS上滑动效果非常的差，会出现卡顿现象；

2、在界面进行点击的时候，界面响应明显要比Android上要慢很多；

3、界面按钮点击之后会产生一个灰色的阴影图层；

开始，在iOS本身寻找问题，以为是iOS webview使用的问题，但是当页面在微信或者其他应用中打开之后，也会出现这种问题，以此排除iOS webview问题，确认问题出现在前端界面上，经过排查，发现是iOS在嵌入前端界面时本身机制的问题，在经过修改之后，问题得以解决，附上解决方案：

一、滑动效果卡顿问题解决方案

在需要滑动的位置加上如下css代码：

-webkit-overflow-scrolling:touch;

以此，界面滑动卡顿问题得以解决，但是，这一行代码会带来一个副作用：

1、在滑动界面之中使用的position：fixed 无法固定下来，会随着界面进行一起滚动

解决方法：将使用的position：fixed（头部导航）写在滑动部位外部，在使用绝对定位进行布局，以此解决问题

2、vue中使用v-if导致的界面初始化之后无法滑动

解决方法：将v-if改成v-show进行展示，解决界面进入之后第一次不能滑动的问题

 

二、界面点反应慢、延时问题解决方案

经过排查，导致问题的原因是iOS嵌套界面之后，界面点击效果会自动产生一个300毫秒的延时，解决方案：

vue 引入 fastclick（npm install fastclick -S）

然后再进行引入 FastClick.attach(document.body);

问题解决

注：在引入fastclick之后，会有一个副作用：input输入框需要连续点击两次或者长按才能获取焦点，解决方法详见个人文章：

vue引入fastClick导致的输入框点击无响应问题

 

三、按钮点击之后会产生灰色图层解决方案

目前未发现前端有效的解决方案，本次是让iOS进行单独的处理

 

四、关于new Date()转换时间在iOS中不生效问题

前端界面使用new Date('2018-12-20 23:59:59').getTime()，放到iOS中后发现，没有正常转换成时间戳，经过查找相关资料发现，

iOS不支持该种时间格式的转换，将代码写成：

new Date('2018-12-20T23:59:59').getTime()

即可获取到正确的时间戳

 

五、关于部分拷贝方法在iOS中不生效问题

前端有时候需要用到拷贝部分内容到剪切板中，但是在使用时发现，部分网上提供的拷贝方法在Android中正常使用，但是在iOS中无法进行拷贝，经过试验发现一种通用的拷贝方法，如下：

/**

* 将内容拷贝到剪切板中

*

* @param copyText                  需要拷贝的内容

*/

function copyContent(message) { // text: 要复制的内容， callback: 回调

  var input = document.createElement("input");

  input.value = message;

  document.body.appendChild(input);

  input.select();

  input.setSelectionRange(0, input.value.length);

  document.execCommand('Copy');

  document.body.removeChild(input);

}

该方法亲测在Android以及iOS中都有效

 

六、关于input输入框在iOS中获取到焦点之后界面上移无法回落问题

在联合移动端开发过程中，会遇到input输入框获取到焦点之后，软键盘自动顶起界面，但是失去焦点之后无法回落的问题，解决方法如下，添加如下代码：

const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

window.scrollTo(0, Math.max(scrollHeight - 1, 0));

 

 

七、关于移动端定时器运行过程中，界面点击/滑动会造成定时器卡顿的现象

原因：界面点击时，iOS会有300毫秒延时阻塞，同时界面滑动时，也会造成定时器方法的阻塞

解决方法：

1.使用fastClick结局300毫秒延时问题，参考文章   第二点

2.定时器运转期间，使用css或者js禁止界面滚动