移動端h5頁面的那些坑

踩過許多坑。特此總結一下：　

　　一、<input type='button'>背景色在ios中的兼容性，顏色發白
　　　　解決辦法：在全局樣式中加入如下代碼：
　　　　input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

 

　　二、在vue中使用jquery weui中的地區選擇器時，經過點擊事件來初始化地區選擇器，第一次點擊無效，第二次點擊才觸發
　　　　解決辦法：在mounted生命週期中執行初始化事件，在onClose事件中調用另一個函數以獲取選擇器選擇的值。這樣在其餘地方就可使用這個值了。

 

　　三、ios端按鈕和輸入框自帶圓角問題：
　　　　解決辦法：
　　　　-webkit-appearance : none ; /* 解決ios上按鈕的圓角問題 */
　　　　border-radius: 0; /* 解決ios上輸入框圓角問題 */

 

　　四、vue中點擊事件阻止冒泡：@click.stop

 

　　五、clipboard.js的使用：
　　　　按鈕觸發：按鈕我用的是div，pc端能正常使用，ios上失效（安卓不清楚，沒測過）。折騰很久，最後嘗試將div換成button按鈕後，pc、ios均正常

 

　　六、swiper輪播圖（4.x版本）時遇到的問題：
　　　　（1）、設置slider容器可以同時顯示的slides數量：能夠設置爲數字（可爲小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量
　　　　（2）、slide可以根據慣性滑動：設置freeMode爲true
　　　　（3）、設定初始化時激活slide的索引：設置initialSlide的值，默認爲0
　　　　（4）、當slider容器中同時顯示多個slides時，讓激活的slides居中：設置centeredSlides爲true
　　　　（5）、分頁器樣式設置：設置pagination對象的type屬性，當type值爲bullets時，會以圓點顯示；當type值爲fraction時，則會以分式形式顯示（形如：1/三、2/三、3/3等）；當type爲progressBar時，則會以進度條形式顯示，即切換slide時，上方會顯示進度條
　　　　（6）、swiper默認顯示三個，中間顯示所有，兩邊顯示部分：設置以下：
　　　　　　spaceBetween: 10 // 表示每一個slide間的間隔
　　　　　　slidesPerView：1.2 // 設置slider容器同時顯示slides的數量。
　　　　　　centeredSlides：true // 讓中間顯示的slides居中
　　　　（7）、swiper動態加載數據輪播滑動異常，也沒法自動輪播（自動輪播的前提是要設置autoplay:true）：須要設置observer:true來啓動動態檢查器，這樣就能夠自動自動輪播了，也能手動操做了，然而新的問題來了，手動滑動後，離開滑塊，沒法繼續自動輪播，須要設置autoplay:{disableOnInteraction:false}如今就能夠正常輪播了。若是想要循環輪播，則添加loop:true（此時新的bug出現了，就是輪播的時候跳過了第一張跟最後一張，目前還未解決）。

 

　　七、vue遮罩層阻止默認滾動事件（適用於遮罩層自己沒有滾動事件的，不然自己的滾動事件也會被阻止）：@touchmove.prevent

 

　　八、h5頁面點擊元素會出現灰色背景：body {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

 

　　九、發現頁面在ios上能正常上下滑動，而安卓上不行，pc端也不能滑動，可是經過鼠標滾動是可行的，這時候有多是css文件中加入了touch-action:none致使的，這句代碼做用是阻止頁面滾動，將它去掉就行了。坑爹的，困擾我很久了。

 　　

　　十、ios上雙擊強制縮放問題：

　　　　解決辦法：*{touch-action: manipulation}   // 該方法還能移除整個文檔的觸發延遲，對於IE10，須要使用-ms-touch-action

 

　　十一、vue圖片懶加載（vue-lazeload）,不能動態切換圖片（如，切換tab時，圖片沒法動態改變）

　　　　解決辦法：爲每一個img標籤添加一個key屬性。<img v-lazy="imgUrl" :key="imgUrl">

　　

　　十二、使用translate致使元素內字體模糊：

　　緣由：translate中的參數爲非整數。常見於translateX(百分比)、translateY(百分比), translate(百分比,百分比)。

　　解決辦法：由於translate中參數百分比實際上是相對於操做元素自己的寬或高的百分比，因此能夠調整所要操做的元素的寬或高，已達到百分比後的值是整數，這樣就能解決元素內字體模糊的問題

 

　　1三、App嵌入h5頁面（使用vue）

　　問題：若是App端須要在頁面跳轉時攔截到跳轉路徑，使用vue的路由跳轉方法時，App端是攔截不到的，由於vue是單頁面應用，根本不存在頁面的跳轉。

　　解決方案：使用window.location.href方法跳轉（注：若是當前頁面使用window.location.href跳轉，且路徑中帶有查詢參數，在跳轉後的頁面中仍然可使用this.$route.query來獲取查詢參數）