快捷導(dǎo)航

解決vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問(wèn)題

更新時(shí)間：2018年11月27日 08:19:38 作者：honey緣木魚(yú)

這篇文章主要介紹了vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

用vue編寫項(xiàng)目接近尾聲，需要集成到移動(dòng)端中，在webstorm上界面，運(yùn)行效果都很完美，但是在蘋果手機(jī)上各種問(wèn)題都出現(xiàn)了，原生項(xiàng)目一向滑動(dòng)流暢，事件響應(yīng)迅速，可是蘋果手機(jī)打開(kāi)這個(gè)項(xiàng)目有兩個(gè)問(wèn)題，

(1).滑動(dòng)頁(yè)面卡頓，

(2).點(diǎn)擊事件響應(yīng)緩慢，百度才發(fā)現(xiàn)在蘋果手機(jī)上有300ms的延遲。

一.滑動(dòng)頁(yè)面卡頓

//頁(yè)面布局
<template>
 <div class='content'>
  頁(yè)面內(nèi)容
 </div>
</template>

在對(duì)應(yīng)的組件的最外層div上加上這樣的樣式：

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

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

(1).在滑動(dòng)界面之中使用的position：fixed 無(wú)法固定下來(lái)，會(huì)隨著界面進(jìn)行一起滾動(dòng)

解決方法：將使用的position：fixed（頭部導(dǎo)航）寫在滑動(dòng)部位外部，在使用絕對(duì)定位進(jìn)行布局，以此解決問(wèn)題

(2).vue中使用v-if導(dǎo)致的界面第一次無(wú)法滑動(dòng)

解決方法：將v-if改成v-show進(jìn)行展示，解決界面進(jìn)入之后不能滑動(dòng)的問(wèn)題

二.點(diǎn)擊事件響應(yīng)緩慢

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

(2).在main.js中設(shè)置方法

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

在引入fastclick之后，雖然頁(yè)面事件快了很多，但是會(huì)有一個(gè)副作用：input輸入框需要連續(xù)點(diǎn)擊兩次或者長(zhǎng)按才能獲取焦點(diǎn)，真是到處是坑??！

解決方法：在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 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: