解決vue 界面在蘋果手機上滑動點擊事件等卡頓問題
用vue編寫項目接近尾聲，需要集成到移動端中，在webstorm上界面，運行效果都很完美，但是在蘋果手機上各種問題都出現(xiàn)了，原生項目一向滑動流暢，事件響應迅速，可是蘋果手機打開這個項目有兩個問題，
(1).滑動頁面卡頓，
(2).點擊事件響應緩慢，百度才發(fā)現(xiàn)在蘋果手機上有300ms的延遲。
一.滑動頁面卡頓
//頁面布局 <template> <div class='content'> 頁面內(nèi)容 </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輸入框需要連續(xù)點擊兩次或者長按才能獲取焦點，真是到處是坑??！
解決方法：在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();
}
};
總結(jié)
以上所述是小編給大家介紹的解決vue 界面在蘋果手機上滑動點擊事件等卡頓問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強大的功能之一，它是html、css、js等的一個聚合體，封裝性和隔離性非常強2022-12-12
這篇文章主要介紹了vue視圖不更新情況詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue form 表單提交+ajax異步請求+分頁效果,需要的朋友可以參考下2017-04-04
我們在平時做業(yè)務的時候,父子組件通信會經(jīng)常用到ref,這篇文章主要給大家介紹了關于vue3循環(huán)設置ref并獲取的解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
Vue.extend和VueComponent的關系源碼解析
這篇文章主要為大家詳解了Vue.extend和VueComponent的關系源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面
這篇文章主要介紹了vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文介紹了五種刷新Vue當前組件的方法：使用location.reload()、路由刷新、v-if或key屬性、beforeRouteUpdate導航守衛(wèi)以及$forceUpdate,每種方法都有其適用場景和優(yōu)缺點,需要的朋友可以參考下2025-02-02
在使用Vue過渡動畫時,注意選擇器優(yōu)先級,謹慎合并樣式,Vue2中關于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動畫的持續(xù)時間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue2項目導出操作實現(xiàn)方法(后端接口導出、前端直接做導出)
這篇文章主要給大家介紹了關于vue2項目導出操作實現(xiàn)方法的相關資料,文中介紹的是后端接口導出、前端直接做導出,通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue中如何引入html靜態(tài)頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01