我走過最遠的路，就是移動端的坑

說個兩句

👉這篇博客，將會是之後遇到的全部移動端上的坑，都會更新在這裏~

若是能夠的話，大家也能夠在評論中，吐槽一下大家開發過程當中遇到的一些坑，讓我之後，也能夠，避免「遭殃」 ~

博客首發在這裏: 👉 Github Blog

HTML radio 關聯 label 後，切換會出現一個藍色圖層一閃而過

在作官網移動端的時候，radio 關聯 label，切換時，會閃過這麼一個藍色圖層，這個是很莫名其妙的

對於這種狀況，應該是 chrome 內核對於點擊前有一個 tap 的高亮，能夠經過下面這段代碼進行解決

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 將高亮變爲白色
}
複製代碼

overflow : scroll 在 ios 上滑動卡頓

仍是官網移動端的時候，overflow: scroll 在 ios 上滑動卡頓，那麼能夠在滾動的容器中添加如下代碼

.div {
  -webkit-overflow-scrolling: touch;
}
複製代碼

微信瀏覽器上下滑動出現回彈

仍是官網移動端，微信瀏覽器中存在着回彈效果，正常狀況下，咱們經過 event.preventDefault() 就能解決

在監聽 touchstart 或者 touchmove 事件的函數裏，經過 event.preventDefault() 進行阻止事件的默認行爲便可

好比官網的代碼中 ：

$(function(){
  // 上滑
  swipeUp('#list',() => {
  /** * 1.獲取屏幕高度，用於margin-top切屏 * 2.經過當前所在的屏數index進行判斷 * 3.觸發切屏動畫 */
  getScreenHeight()
  if(index){
    toggleSliderScreen()
  }
 })
}

複製代碼

function swipeUp(selector: any, callback: any) {
  let clientY: any
  const differences = 50 // 絕對值大於此值定義爲滑動操做
  $(document).on('touchstart', selector, function(e) {
    clientY = e.changedTouches[0].pageY
  })

  $(document).on('touchend', selector, function(e) {
    if (clientY - e.changedTouches[0].pageY > differences) {
      e.preventDefault() // 阻止默認事件
      callback()
    }
  })
}
複製代碼

可是，這裏有問題啊，咱們最後一篇要能夠正常滾動啊，移動端的 touchmove 事件的默認行爲就是滾動頁面啊，咱們給阻止掉了！！難受的一匹...

還有一種方案，就是經過 touchcancel ，也就是添加一個 touchcancel 事件，在這個事件中去觸發咱們的 callback 回調

function swipeUp(selector: any, callback: any) {
  let clientY: any
  const differences = 50 // 絕對值大於此值定義爲滑動操做
  $(document).on('touchstart', selector, function(e) {
    clientY = e.changedTouches[0].pageY
  })
  $(document).on('touchend', selector, function(e) {
    if (clientY - e.changedTouches[0].pageY > differences) {
      e.preventDefault() // 阻止默認事件
    }
  })
  $(document).on('touchcancel', selector, function(e) {
    if (clientY - e.changedTouches[0].pageY > differences) {
      callback()
    }
  })
}
複製代碼

可是這也不是最優解，後邊的話，是經過手動觸發，經過監聽 body 的 touchmove 事件，而後不是最後一屏就阻止，到最後一屏就不阻止 ~

document.body.addEventListener('touchmove', disableBrowerDrag, {
  passive: false
}) //passive 參數不能省略，用來兼容 ios 和 android

function disableBrowerDrag(e) {
  if (number < 3) {
    // number 爲當前在的第幾屏
    e.preventDefault() //阻止默認的處理方式(阻止下拉滑動的效果)
  }
}
複製代碼

input 獲取焦點軟鍵盤彈出，影響定位問題

在移動端表單，input 獲取焦點彈出鍵盤後，頁面出現空白一片，也就是被頂上去了（安卓瀏覽器出現）

能夠經過給定一個 min-height ，就可解決此問題了

<div className="box" id="swaperScrollBox" style={{ height: '100vh'}}></div>
複製代碼

$('#swaperScrollBox').css('min-height', window.innerHeight + 'px')
複製代碼

.box {
  overflow: hidden;
  position: relative;
}
複製代碼

echarts 移動端沒法雙指縮放

在 echarts 中，v4.2.1 版本沒法實現雙指縮放，這是由於版本庫的問題，在官網的 issues 中也能找到許多，只需從 v4.2.1 降到 v4.1.0 便可 ~