vue 介面在蘋果手機上滑動點選事件等卡頓解決方案

摘要： 用vue編寫專案接近尾聲，需要整合到移動端中，在webstorm上介面，執行效果都很完美，但是在蘋果手機上各種問題都出現了，原生專案一向滑動流暢，事件響應迅速，可是蘋果手機開啟這個專案有兩個問題，(1).滑動頁面卡頓，(2).點選事件響應緩慢，百度才發現在蘋果手機上有300ms的延遲。 ...

用vue編寫專案接近尾聲，需要整合到移動端中，在webstorm上介面，執行效果都很完美，但是在蘋果手機上各種問題都出現了，原生專案一向滑動流暢，事件響應迅速，可是蘋果手機開啟這個專案有兩個問題，(1).滑動頁面卡頓，(2).點選事件響應緩慢，百度才發現在蘋果手機上有300ms的延遲。

一.滑動頁面卡頓

//頁面佈局
<template>
<div class='content'>
頁面內容
</div>
</template>

在對應的元件的最外層div上加上這樣的樣式：

.content{
-webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling: touch;這句程式碼最好可在公共的樣式中新增，防止很多頁面都需要寫的麻煩。這句程式碼雖然可以解決滑動不流暢的問題，但是可能會引起幾個小問題：

(1).在滑動介面之中使用的position：fixed 無法固定下來，會隨著介面進行一起滾動

解決方法：將使用的position：fixed（頭部導航）寫在滑動部位外部，在使用絕對定位進行佈局，以此解決問題

(2).vue中使用v-if導致的介面第一次無法滑動

解決方法：將v-if改成v-show進行展示，解決介面進入之後不能滑動的問題

二.點選事件響應緩慢

(1).安裝fastclick (npm install fastclick -S)

(2).在main.js中設定方法

import FastClick from 'fastclick'
 
FastClick.attach(document.body);

在引入fastclick之後，雖然頁面事件快了很多，但是會有一個副作用：input輸入框需要連續點選兩次或者長按才能獲取焦點，真是到處是坑啊！

解決方法：在main.js中新增下面的程式碼

FastClick.prototype.focus = function(targetElement) {
 
var length;
 
// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
 
if (deviceIsIOS&& targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
 
length = targetElement.value.length;
 
targetElement.focus();
 
targetElement.setSelectionRange(length, length);
 
} else {
 
targetElement.focus();
 
}
 
};

完美解決問題！不知道還有多少未知坑等著填補，遇一坑天一坑！