vue移動(dòng)端項(xiàng)目中使用fastclick及遇上的issue

cod7ce 發(fā)布于2019-08-26 10:39 / 2511人閱讀

摘要：在項(xiàng)目中安裝插件在中引入并綁定到在項(xiàng)目中安裝成功后測(cè)試會(huì)遇到以下問(wèn)題點(diǎn)擊不靈敏解決方法項(xiàng)目中使用時(shí)點(diǎn)擊不靈敏兼容處理在中，有一些元素如等在會(huì)出現(xiàn)這是因?yàn)檫@些元素并沒(méi)有和的整型數(shù)字屬性，所以一旦引用就會(huì)報(bào)錯(cuò)，因此排除這些屬性才使用方法修復(fù)

1、在vue項(xiàng)目中安裝fastclick插件

npm install --save fastclick

2、在main.js中引入并綁定到body

import  FastClick  from  "fastclick"

FastClick.attach(document.body);

3、在項(xiàng)目中安裝fastclick成功后測(cè)試會(huì)遇到以下問(wèn)題：

os input點(diǎn)擊不靈敏
解決方法：vue項(xiàng)目中使用fastclick時(shí)ios input點(diǎn)擊不靈敏

FastClick.prototype.focus = function (targetElement) {
  var length;

  var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
  var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;? 
    //兼容處理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange會(huì)出現(xiàn)TypeError? ? 
    //這是因?yàn)檫@些元素并沒(méi)有selectionStart和selectionEnd的整型數(shù)字屬性，所以一旦引用就會(huì)報(bào)錯(cuò)，因此排除這些屬性才使用setSelectionRange方法
  if ( deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf("date") !== 0 && targetElement.type !== "time" && targetElement.type !== "month" && targetElement.type !== "email") { 
    length = targetElement.value.length; 
    targetElement.setSelectionRange(length, length);//修復(fù)bug ios 11.3不彈出鍵盤，這里加上聚焦代碼，讓其強(qiáng)制聚焦彈出鍵盤? ? 
    targetElement.focus(); 
  } else { 
    targetElement.focus(); 
  }
}

os 軟鍵盤關(guān)閉后頁(yè)面不會(huì)回彈
解決方法：解決IOS中input失焦后，頁(yè)面上移，點(diǎn)擊不了問(wèn)題

      var u = navigator.userAgent;
      var flag;
      var timer;
      var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isIOS) {
        document.body.addEventListener("focusin", () => {  //軟鍵盤彈起事件
          flag = true;
          clearTimeout(timer);
        })
        document.body.addEventListener("focusout", () => { //軟鍵盤關(guān)閉事件
          flag = false;
          if (!flag) {
            timer = setTimeout( ()=> {
              window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重點(diǎn)  =======當(dāng)鍵盤收起的時(shí)候讓頁(yè)面回到原始位置(這里的top可以根據(jù)你們個(gè)人的需求改變，并不一定要回到頁(yè)面頂部)
            }, 200);
          } else {
            return false;
          }
        })
      } else {
        return false;
      }