工作中遇到的问题（不局限于技术）

[sanlangguo]

input 弹起，收起时出现白底

1. 监听失去焦点时： window.scroll(0,0)

http 请求时，options 会遇到的问题

复杂请求时，在 http request 请求头自定义 header, post 请求会每次先触发 options 请求，这时候，服务端没有针对 options 处理会出现 跨域问题，另外会造成性能问题，每次多一次 http 请求

解决方案

• 后端延迟认证处理

对 OPTIONS 请求进行处理, option为预请求，跨域或者复杂请求，浏览器都会自动发起一个预先请求,可以设置options的缓存时间

  // 本次预检请求的有效期，默认为1小时
  header('Access-Control-Max-Age: 3600000');

• 就是把非简单请求转化为简单请求

  request.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
  if (request.method == 'post') {    
    request.data = qs.stringify(request.data);  
  } 

oss文件调上传接口，http status为0，服务端收不到请求，前端浏览器控制台显示跨域问题

原因

• 服务端对上传的文件大小，做了限制，进行了拦截

解决方案

• 前端：进行文件压缩

• 后端：对文件大小的限制适当放开

ios 兼容问题

• justify-content: space-evenly 在 ios 10 兼容问题

• new URLSearchParams(window.location.search) 查询 url 里面的参数,出现错误,导致页面打不开

  100vh继承的高度和100%继承的区别(在safari 遇到一屏出现滚动条问题)

• 100vh继承的高度和100%继承的区别

1. 100vh继承的屏幕的高度
2. 100%继承的document的高度

一屏内容且不需滚动条时,继元素高度最好用100%来继承

移动端避免使用 100vh

tips: 当浏览器底部出现操作栏时，vh会包含操作栏的高度，而此时只需要document的高度，就需要用100%来获取

精确浮点数问题

参考链接

vant 踩坑指南 之vant tab

• van-tabs组件刷新时下划线位置错误问题

不过因为刷新时重绘的可能比较慢，要延时一会调用这个方法，否则，没有效果

 <van-tabs class="vant-tabs" v-model="activeName" ref="tabs">
        <van-tab title="我的自选" :name="0"></van-tab>
        <van-tab title="公募基金" :name="1"></van-tab>
        <van-tab title="专户产品" :name="2"></van-tab>
      </van-tabs>

  setTimeout(() => {
      this.$refs.tabs.resize();
    }, 200);