我走过最远的路，就是移动端的坑

说个两句

👉这篇博客，将会是之后遇到的全部移动端上的坑，都会更新在这里~

若是能够的话，大家也能够在评论中，吐槽一下大家开发过程当中遇到的一些坑，让我之后，也能够，避免“遭殃” ~

博客首发在这里: 👉 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 便可 ~