vue移動端開發遇到的那些坑

1. IOS移動端原始輸入法問題

IOS原始輸入法，中文輸入時，沒法觸發keyup事件，而keyup時對應的enter事件也沒法觸發css

解決方案：html

將keyup監聽替換成值的watch
讓使用者安裝三方輸入法，好比搜狗輸入法（不太現實）

2. IOS移動端click事件300ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。這是因爲區分單擊事件和雙擊屏幕縮放的歷史緣由形成的,vue

2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。android

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。ios

解決方案：git

fastclick能夠解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
觸摸事件的響應順序爲 touchstart –> touchmove –> touchend –> click,也能夠經過綁定ontouchstart事件，加快對事件的響應，解決300ms延遲問題

3. 一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發，css增長cursor:pointer就搞定了。

4. 移動端input元素聚焦問題

問題出現場景重現：項目須要寫一個搜索組件，相關代碼以下web

<template>
  <div class="y-search" :style="styles" :clear="clear">
    <form action="#" onsubmit="return false;">
      <input type="search"
        class="y-search-input"
        v-model='model'
        :placeholder="placeholder"
        @input="searchKeyupFn"
        @keyup.enter="searchEnterFn"
        @foucs="searchFocusFn"
        @blur="searchBlurFn"
      />
      <y-icons class="search-icon" name="search" size="14"></y-icons>
    </form>
    <div v-if="showClose" @click="closeFn">
      <y-icons class="close-icon" name='close' size='12'></y-icons>
    </div>
  </div>
</template>

當我進行keyup事件的時候，其對應的enter事件，不能實現失焦功能。而實際項目中須要實現失焦，那麼只能經過操做$el節點了。api

解決方案：在對應的enter事件時進行DOM操做瀏覽器

searchEnterFn (e) {
  document.getElementsByClassName('y-search-input')[0].blur()
  // dosomething yourself
}

5. fixed定位缺陷

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案：可用iScroll插件解決這個問題緩存

6. 阻止旋轉屏幕時自動調整字體大小

* {
  -webkit-text-size-adjust: none;
}

7. calc的兼容處理

CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。
Android瀏覽器目前仍然不支持calc，因此要在以前增長一個保守尺寸：

div {
  width: 95%;
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
}

8. 在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

不過這個方法在如今的安卓瀏覽器下，只能去掉那個橙色的背景色，點擊產生的高亮邊框仍是沒有去掉，有待解決！

一個CSS3的屬性，加上後，所關聯的元素的事件監聽都會失效，等於讓元素變得「看得見，點不着」。IE到11纔開始支持，其餘瀏覽器的當前版本基本都支持。詳細介紹見這裏：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;

9. IOS下取消input在輸入的時候英文首字母的默認大寫

<input type="text" autocapitalize="none">

10. 禁止 IOS 彈出各類操做窗口

-webkit-touch-callout: none;

11. 消除transition閃屏問題

/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-transform-style: preserve-3d;
/*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/
-webkit-backface-visibility: hidden;

12. IOS系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一的空格

解決方案：經過正則去除

this.value = this.value.replace(/\u2006/g, '');

13. 禁止IOS和Android用戶選中文字

-webkit-user-select: none;

14. CSS動畫頁面閃白,動畫卡頓

解決方法:
1.儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
2.開啓硬件加速

-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

15. input的placeholder會出現文本位置偏上的狀況

input 的placeholder會出現文本位置偏上的狀況：PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決是設置line-height：normal

16.input ios端陰影

input{
    -webkit-appearance: none!important;
}

17.ios 背景圖position:fixed 絕對定位兼容問題

style="background-image: url('static/image/bg.png');background-size: 100%;background-attachment: fixed; background-position: center top;background-repeat: no-repeat;"

18.vue 下滑滾動 scroll

<div  :style="{'height':getClientHeight}" @scroll="handleSroll" class="firstcont"></div>
export default {
		
		data() {
			return {
             secondlistty:[],
             gitf:false
              }
          },
computed: {
			getClientHeight:function () {
			//屏幕可視區域的高度
			  let clientHeight = document.body.clientHeight-5  + "px"
			  console.log("clientHeight 1=="+clientHeight)
			  
			  console.log("clientHeight 3=="+clientHeight)
			  return clientHeight
			}
		},
methods: {
    handleSroll(e) {
	if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-5 && !this.gitf){
					  if (this.secondlistty.length >= 10) {
						this.litty(this.start);
					  }
					}
			},
     }
}
<style>
    .firstcont {
    overflow-y: scroll;
		-webkit-overflow-scrolling: touch;   /*這句是爲了滑動更順暢*/
		::-webkit-scrollbar {
		    display: none;
		}
  }

</style>

19.阻止事件冒泡:

v-on:click.stop="事件方法（）"

20.基於vue開發的微信公衆號ios系統中的一點坑兒

問題描述：input框在頁面中下位置時：點擊輸入框時ios系統輸入法將瀏覽器整個推上去，關閉輸入法時整個瀏覽器仍是在一種被推上去的狀態，須要手動下拉下頁面將瀏覽器重置爲正常狀態。

解決方法：選擇全部的input框，對其添加"聚焦"和"失焦"事件監聽，"聚焦"時給該單頁面添加"paddingBottom"，"失焦"時重置樣式，能夠自動讓瀏覽器重置爲正常狀態。


let that = this;
// 解決ios輸入框將網頁頂起致使其餘元素脫離dom流問題
document.querySelectorAll("input").forEach(element => {
    element.addEventListener("focus", function() {
    that.$refs.pagebox.style.paddingBottom = "1px";
  })
  element.addEventListener("blur", function() {
    that.$refs.pagebox.style.paddingBottom = "0";
  })
})

20. 往返緩存問題

點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關係。
解決方法：

window.onunload = function(){};