记录一些工作中踩到的坑

1. axios post 请求是后端收不到参数

axios 会帮我们把请求数据转换成 JSON

也就是说会将 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 变成 ‘Content-Type’：‘application/json;charset=utf-8’

我们手动设置请求的Content-Type为application/x-www-form-urlencoded，并不能生效

我们需要把参数转换为query参数

axios 中有一个 qs 库，可以帮助我们将数据进行装换

只需要引入，不需要再下载

let Qs = require('qs');

export function myReq(data) {
  return axios({
    method: "post",
    url: "/myUrl",
    data: Qs.stringify(data)
  })
}

//也可以通过配置  transformRequest  进行转换
export function myReq(data) {
  return axios({
    method: "post",
    url: "/myUrl",
    transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      return Qs.stringify(data)
    }],
    data: data
  })
}

2.获取没有指定宽高容器的宽度、高度

描述：

有的容器不能给定宽高，但是特定情况下，我们又需要获取该容器的宽高。通过检查元素，是能够看到元素宽高，但是传统方法 dom.scrollHeight、dom.scrollHeight、dom.style.height等类似属性都获取不到实时宽高，但是我们可以用 getBoundingClientRect() 获取元素位置

 let dom = document.querySelector(".class1");
 //dom.scrollHeight、dom.scrollHeight、dom.style.height  获取不到


let rectObject=dom.getBoundingClientRect()
//getBoundingClientRect() 方法中包含元素的上下左右位置已经宽高
//ctObject.top：元素上边到视窗上边的距离;
//ctObject.right：元素右边到视窗左边的距离;
//ectObject.bottom：元素下边到视窗上边的距离;
//ectObject.left：元素左边到视窗左边的距离;
//ectObject.width：是元素自身的宽
//ectObject.height是元素自身的高

3. 移动端弹出弹框后自动弹出手机输入法键盘

其实不仅仅是弹框，还有很多情况，在我们做某个操作后，往往不需要出现手机键盘，我们只需要在触发该事件后，使当前获得焦点的元素失焦即可

 document.activeElement.blur();

4. 移动端页面会缩放，影响使用

如果是vue项目的话，将index.html视口标签属性进行修改

添加以下属性

maximum-scale 允许用户的最大缩放值

user-scalable 是否允许用户进行缩放

默认属性为允许 yes 或 1，而不允许则需设置为 no 或 0

最后设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" 

5.基于js的表格循环滚动

项目中有自己的前端组件库
但组件库的表格不支持循环滚动
又不想再找第三方插件

思路：
设一个定时器
在每次执行时，获取表格数据列表
将第一项删除，再添加到数组中
这样动起来就有了一个循环滚动的效果

 setInterval(function(){
    let item= dataList.shift();
    dataList.push(item)
}, 1000);

// 双向数据绑定的直接就可以了
// 单向数据流需要重新加载一下表格数据

6.js循环出来的按钮，点击一次多次触发

js循环出来的按钮，第一次点击触发一次，第二次点击触达两次
阻止事件冒泡等方法都没用
最后的尝试是：unbind

//方法一：点击事件执行完毕后，给绑定点击事件的dom解绑
obj.unbind('click')

// 方法二：在定义点击事件时，先解绑载绑定
obj.unbind("click").bind("click",function(){

})