一、滑动效果卡顿问题解决方案
在需要滑动的位置加上如下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禁止界面滚动