前段時間，公司用前端做了一個微型圖片生成界面，通過考慮，選擇使用vue多頁面進行編寫，在界面編寫完成之后，本地瀏覽器進行測試，發(fā)現(xiàn)一切都很順利，然后嵌入到APP端進行聯(lián)合測試。前期，界面在Android上運行比較順利，個人以為沒什么問題，但是當(dāng)頁面嵌入到iOS中，問題暴露了出來，主要體現(xiàn)在三點上：
1、界面使用了瀑布流滑動效果，但是在iOS上滑動效果非常的差，會出現(xiàn)卡頓現(xiàn)象；
2、在界面進行點擊的時候，界面響應(yīng)明顯要比Android上要慢很多；
3、界面按鈕點擊之后會產(chǎn)生一個灰色的陰影圖層；
開始，在iOS本身尋找問題，以為是iOS webview使用的問題，但是當(dāng)頁面在微信或者其他應(yīng)用中打開之后，也會出現(xiàn)這種問題，以此排除iOS webview問題，確認問題出現(xiàn)在前端界面上，經(jīng)過排查，發(fā)現(xiàn)是iOS在嵌入前端界面時本身機制的問題，在經(jīng)過修改之后，問題得以解決，附上解決方案：
一、滑動效果卡頓問題解決方案
在需要滑動的位置加上如下css代碼：
-webkit-overflow-scrolling:touch;
以此，界面滑動卡頓問題得以解決，但是，這一行代碼會帶來一個副作用：
1、在滑動界面之中使用的position：fixed 無法固定下來，會隨著界面進行一起滾動
解決方法：將使用的position：fixed（頭部導(dǎo)航）寫在滑動部位外部，在使用絕對定位進行布局，以此解決問題
2、vue中使用v-if導(dǎo)致的界面初始化之后無法滑動
解決方法：將v-if改成v-show進行展示，解決界面進入之后第一次不能滑動的問題
二、界面點反應(yīng)慢、延時問題解決方案
經(jīng)過排查，導(dǎo)致問題的原因是iOS嵌套界面之后，界面點擊效果會自動產(chǎn)生一個300毫秒的延時，解決方案：
vue 引入 fastclick（npm install fastclick -S）
然后再進行引入 FastClick.attach(document.body);
問題解決
注：在引入fastclick之后，會有一個副作用：input輸入框需要連續(xù)點擊兩次或者長按才能獲取焦點，解決方法詳見個人文章：
vue引入fastClick導(dǎo)致的輸入框點擊無響應(yīng)問題
三、按鈕點擊之后會產(chǎn)生灰色圖層解決方案
目前未發(fā)現(xiàn)前端有效的解決方案，本次是讓iOS進行單獨的處理
四、關(guān)于new Date()轉(zhuǎn)換時間在iOS中不生效問題
前端界面使用new Date('2018-12-20 23:59:59').getTime()，放到iOS中后發(fā)現(xiàn)，沒有正常轉(zhuǎn)換成時間戳，經(jīng)過查找相關(guān)資料發(fā)現(xiàn)，
iOS不支持該種時間格式的轉(zhuǎn)換，將代碼寫成：
new Date('2018-12-20T23:59:59').getTime()
即可獲取到正確的時間戳
五、關(guān)于部分拷貝方法在iOS中不生效問題
前端有時候需要用到拷貝部分內(nèi)容到剪切板中，但是在使用時發(fā)現(xiàn)，部分網(wǎng)上提供的拷貝方法在Android中正常使用，但是在iOS中無法進行拷貝，經(jīng)過試驗發(fā)現(xiàn)一種通用的拷貝方法，如下：
/**
* 將內(nèi)容拷貝到剪切板中
*
* @param copyText? ? ? ? ? ? ? ? ? 需要拷貝的內(nèi)容
*/
function copyContent(message) { // text: 要復(fù)制的內(nèi)容， callback: 回調(diào)
? 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中都有效
六、關(guān)于input輸入框在iOS中獲取到焦點之后界面上移無法回落問題
在聯(lián)合移動端開發(fā)過程中，會遇到input輸入框獲取到焦點之后，軟鍵盤自動頂起界面，但是失去焦點之后無法回落的問題，解決方法如下，添加如下代碼：
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
七、關(guān)于移動端定時器運行過程中，界面點擊/滑動會造成定時器卡頓的現(xiàn)象
原因：界面點擊時，iOS會有300毫秒延時阻塞，同時界面滑動時，也會造成定時器方法的阻塞
解決方法：
1.使用fastClick結(jié)局300毫秒延時問題，參考文章? ?第二點
2.定時器運轉(zhuǎn)期間，使用css或者js禁止界面滾動
