项目踩坑指北

193 阅读3分钟

1、elementtable组件开启多选效果@selection-change方法,列表重新赋值也会触发。

2、ie浏览器下使用get请求参数中有中文字符会变成乱码导致400错误,需要把中文参数urlEncode下。

3、微信小程序ios日期格式-报错

new Date('2020-02-11 10:22:30')传入2020-02-11在ios端会报错,ios不能识别,需要转化成2020/02/11,ios才能识别。使用以下正则转化:

'2020-02-11 10:22:30'.replace(/-/g, '/');

4、iOS 微信浏览器 输入框失去焦点,页面没有返回底部

如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ,就会惊奇的发现键盘收起后,原本被滚动顶起的页面并没有回到底部位置,导致原来键盘弹起的位置“空”了。

解决方案:input输入框失去焦点,重置窗口的top

window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

5、fixed定位失效

父元素设置了transform属性,子元素的fixed定位会失效,子元素会根据父元素进行定位。

  <div style="transform: translate(0);">
      <div style="position: fixed;left:0;top:0;"></div>
    </div>

6、try catch只能捕获同步的异常,异步的异常不会被捕获。

原因:try catch执行在主线程中,调用栈一旦结束了它的调用,就会被清空掉,等到抛出异常的try catch已经没有了。

try{
  setTimeout(()=>{
    throw '抛出异常'   //不会捕获
  },2000)
}catch(err){
  console.log(err);
}

7、html2canvas把dom节点转换成图片会导致图片缺失、位移的情况

应该是库的原因,换成dom-to-image库可以解决。

8、vue 的 v-for 的key需要设置唯一值,不能设置为返回时间戳的方法,修改数组时会key会不断更新,在diff算法下,会默认是新的节点,就会导致视图不断的闪动。

9、div设置display:none属性,里面的图片img还是会加载,背景图片不会加载。

<div style="display: none;">
   <div style='background:url("https://www.baidu.com/img/flexible/logo/pc/result@2.png")'></div>  <!-- 不加载 -->
   <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="">  <!-- 加载 -->
</div>

10、iView-ui的时间组件DatePicker获取时间默认utc时间

使用v-model绑定获取值会默认获取utc时间,需要使用@on-change方法才能获取GMT的中国标准时间,默认值使用value。

11、IOS 键盘弹起挡住原来的视图

解决方式:

可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded(Boolean)方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 true,则元素将在其所在滚动区的可视区域中居中对齐。 false,则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

12、onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件,在安卓手机浏览器中没有问题,但是在 ios 手机浏览器中用输入法输入之后,并未立刻相应 keyup 事件