移動端h5頁面的那些坑


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

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

 

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

 

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

 

  4、vue中點擊事件阻止冒泡:@click.stop

 

  5、clipboard.js的使用:
    按鈕觸發:按鈕我用的是div,pc端能正常使用,ios上失效(安卓不清楚,沒測過)。折騰好久,最后嘗試將div換成button按鈕后,pc、ios均正常

 

  6、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/3、2/3、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出現了,就是輪播的時候跳過了第一張跟最后一張,目前還未解決)。

 

  7、vue遮罩層阻止默認滾動事件(適用於遮罩層本身沒有滾動事件的,否則本身的滾動事件也會被阻止):@touchmove.prevent

 

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

 

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

   

  10、ios上雙擊強制縮放問題:

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

 

  11、vue圖片懶加載(vue-lazeload),不能動態切換圖片(如,切換tab時,圖片無法動態改變)

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

  

  12、使用translate導致元素內字體模糊:

  原因:translate中的參數為非整數。常見於translateX(百分比)、translateY(百分比), translate(百分比,百分比)。

  解決辦法:因為translate中參數百分比其實是相對於操作元素本身的寬或高的百分比,所以可以調整所要操作的元素的寬或高,已達到百分比后的值是整數,這樣就能解決元素內字體模糊的問題

 

  13、App嵌入h5頁面(使用vue)

  問題:如果App端需要在頁面跳轉時攔截到跳轉路徑,使用vue的路由跳轉方法時,App端是攔截不到的,因為vue是單頁面應用,根本不存在頁面的跳轉。

  解決方案:使用window.location.href方法跳轉(注:如果當前頁面使用window.location.href跳轉,且路徑中帶有查詢參數,在跳轉后的頁面中仍然可以使用this.$route.query來獲取查詢參數)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM