用

(1).滑動頁面卡頓，

(2).點擊事件響應緩慢，百度才發現在蘋果手機上有300ms的延遲。

一.滑動頁面卡頓

//頁面布局

頁面內容

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

.content{

-webkit-overflow-scrolling: touch;

}

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

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

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

(2).

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

二.點擊事件響應緩慢

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

(2).在main.

import FastClick from 'fastclick'

FastClick.attach(document.body);

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

解決方法：在main.

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();

}

};

總結

以上所述是小編給大家介紹的解決vue 界面在蘋果手機上滑動點擊事件等卡頓問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

總結

以上是生活随笔為你收集整理的vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。