踩坑日记(持续更新...)

摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。

1,vue的{{}}怎么失效了
项目使用了twig模板渲染 语法{{}}冲突，使用v-text v-html渲染 可以写表达式的写法" "字符"+变量 "
2，函数防抖节流封装
实用的下拉加载更多代码demo
给滚动事件绑定如下代码

if (!this.hasMore) {
      return
    }
if ($(window).scrollTop() + $(window).height() + 10 > $("body").height()) { // 触底了
  if (this.timer)clearTimeout(this.timer)
  console.log("触底了")
  this.timer = setTimeout(() => {
    this.page += 1

    this.ajaxList(this.page)
  }, 300)
}

//原生js的高度计算
 let scrollTop = document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop// 向上卷去的高度 这种||写法是为了兼容手机

let winHeight = document.documentElement.clientHeight// 可视区域的高度
let contentHeight = document.documentElement.scrollHeight// 内容区域的总高度

3，video的东西
4，iphone 5s的flex 的justify-content:space between失效 使用position定位解决的
5,jq的animate和fadein不好使了，项目使用的是zeptojs,不支持animate fadein
6，用事件委托的方式监听video的play 监听不到 只能给video本身加play事件，给父元素不行
7,git commit时提示没有权限打开 COMMIT_EDITMSG ，在.git的文件的右键属性里 不让其只读

1,git push提醒hint: "git pull ...") before pushing again.
git pull提醒Your local changes to the following files would be overwritten by merge:Please commit your changes or stash them before you merge.

多试了几次 弹出.git 的.MERGE_MSG什么的linux操作界面 然后按照提示:recover 最后:wq 再git push提交成功了 应该是网速较慢导致没上传或下载成功
2,gitignore里的目录要从根目录写起（绝对目录）或直接文件名（全局搜索匹配）

用nodemon启动服务器 前一阵还是每次上班都要执行一下命令，在后来启动服务器报错

应该是服务器自己启动了 端口占用了 杀掉手动启动的 依然能访问本地服务器 应该是电脑的什么问题 看任务管理器 把进程里所有的node.exe杀掉 好了

video和img自身是有宽高比例的，不设置样式的话，页面就是展示它自身的大小，如果只设置宽，不设置高，他们会根据比例，自动展示多少高度,只设置高度同理。

img的间隙问题：
块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font有关，不一定是5px），所以以上代码的效果中不同div之间有间隙，这是因为图片与父元素的底边有距离。说到baseline呢，其实它是vertical-align属性的默认值，vertical-align属性是设置元素的垂直排列的，用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐，除了baseline对齐方式之外，还可以是sub | super | top | text-top | middle | bottom | text-bottom |inherit（任何的版本的Internet Explorer （包括 IE8）都不支持属性值 "inherit"）。

　　知道了问题产生的原因，就好对症下药解决问题了，其实就是要消除baseline对齐方式产生的距离。

　　所以方法一，很容易想到，把对齐方式改一下不就好了，于是设置img的vertical-align属性为bottom；

　　方法二就是上文说的给父元素加上font-size:0的属性，既然这个距离和font有关，那么把字体大小设为0，总该没有距离了吧；

　　方法三可由方法二想到，既然为0可以，那把行高设的很小可不可以呢？经试验发现，本例图片大小为200px，设line-height不大于12就能够消除间隙了，鉴于这个距离一般是5px，所以可以把line-height设为5px左右；

　　另外一个间隙是多个img标签的左右间隙，是由于img标签是行内元素，而事实是当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

　　所以方法就是上文提到的，去掉img标签之间所有的空格，如果又不想把所有连续的行内元素写到一行，可以多行注释，把空格回车什么的注释掉，就像下图这样；当连续的行内元素不是img时，也可以通过设置父元素的font-size为0来消除左右间隙。
将img设置为display:block

原生写的XMLHttpRequest post请求的参数类型是Request payload 如何转为form data

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); 
fetch("/users", {
  method: "POST",
  body: formData
})

let userObj = {userName: ’xxx", age: "21"}
 formData.append("user", userObj)

function objectToFormData (obj, form, namespace) {
  const fd = form || new FormData();
  let formKey;
  
  for(var property in obj) {
      if(obj.hasOwnProperty(property)) {
        let key = Array.isArray(obj) ? "[]" : `[${property}]`;
        if(namespace) {
          formKey = namespace + key;
        } else {
          formKey = property;
        }
      
        // if the property is an object, but not a File, use recursivity.
        if(typeof obj[property] === "object" && !(obj[property] instanceof File)) {
          objectToFormData(obj[property], fd, formKey);
        } else {
          
          // if it"s a string or a File object
          fd.append(formKey, obj[property]);
        }
        
      }
    }
  
  return fd;
    
}

这样，就可以将对象转化为对应的formData的格式了
multipart/form-data是基于post方法来传递数据的，并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式
但是结果不会返回对象 而是如图

a标签 没有跳转地址的话 加上href="javascript:;" 否则在app里点击会重刷一下当前网页

vue脚手架 安装时 提示vue不是内部或外部指令

video视频原生封装

事件委托的方式委托子元素事件，子元素还有子元素，事件点击到孙子元素时 没有处罚子元素的事件

11111111111
        
2222
            
333
        
    
    

页面加载进来执行滚动事件，使之滚到某个位置，失效。
首先控制其滚动条事件的元素，必须里面的元素高度超过它的高度，它才会有滚动条一说，二是它必须overflow:auto

vconsole 源码地址https://www.w3cways.com/demo/...

ios手机 吸顶导航时，惯性滚动时不会吸顶
何为惯性滚动，就是一滑，然后停止，它还在继续滚，
本来有个吸顶导航，位置不是一直在顶部，一定条件才吸顶(js实现的)，惯性滚动时它不吸顶。
但是用position:sticky即使惯性滚动进行中也能，经过测试没兼容性问题

ios的惯性滚动不会计算滚动条的scrollTop，只有停止了才会触发scroll事件。
链接描述

事件的ev.target.tagName是大写的标签

ios的动态设置页面title 失效 解决办法

document.setTitle = function(t) {
                        document.title = t;
                        var i = document.createElement("iframe");
                        i.src = "//m.baidu.com/favicon.ico";
                        i.style.display = "none";
                        i.onload = function() {
                          setTimeout(function(){
                            i.remove();
                          }, 9)
                        }
                        document.body.appendChild(i);
                      }
                
                      setTimeout(function(){
                        document.setTitle("biaoti")
                      }, 50)

实现页面锚定的三种方法
1，a标签href="#id"
对应元素加id
但这种方法会在一些手机上产生页面刷新的问题
2,jq通过$("body,html").animate({scrollTop:7})
3,a标签 onclick="document.getElementById("bb").scrollIntoView()" 不会有刷新

推荐3

判断是否小程序
window.__wxjs_environment=="miniprogram"||window.globalEvn=="miniprogram"

axios使用
import Axios from "axios";

const ajax = Axios.create({
  baseURL: "/api",
  timeout: 30000,
  headers: {"content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}//请求参数设置为form data格式
})
ajax.interceptors.response.use(res=>{//接口返回结果 不处理是在data下 该处理是直接将接口结果返回
  return res.data
})

请求参数不做qs处理 控制台的请求参数如上

想变成如下的，需要import qs from "qs";qs.stringify(json格式请求参数)

gitignore 如果某个文件提交过 事后添加 并不会被忽略

vue lazyload的坑：1，js锚定，锚定到这个位置了，滑动一点点，由于上面的图片加载出来了，导致这个位置往下滑了
2，导航tab切换，该导航块下的图片在屏幕里但不加载出来，只有滑动一下才出来
解决办法
vue-lazyload的触发条件是
["scroll", "wheel", "mousewheel", "resize", "animationend", "transitionend", "touchmove"]
可以使tab切换时加上父级块动画transition效果，例如透明度，则作为子级的img也会有动画效果，则会触发懒加载条件
貌似preload值越大，加载出的正式图片比例越高，范围0-2？

vue-amap 地图插件 用了报错如下

acs项目的try2分支 增加了某个文件flashsale 切到master分支 pull,在切回try2分支 merge master，然后新建的文件就被合并没了

手机滑动过程中，定时器停止了，停止滑动后，定时器才恢复
http://videosy.soyoung.com/Ft...链接描述

ios试了ip6和ipx 没有停止定时的现象

如何在七巧板的自定义html支持写vue代码 vue-layout give-up

项目打开时 git bash命令切换不同分支 容易丢失文件&解决冲突时 a分支merge b分支 解决冲突 提交 容易把b分支对应的代码更改为解决后的代码。。。

vue的 有坑 慎入
如何一行img 宽度css设置一致了，高度不确定，有大有小，不能设置，但也要自动一致呢（排除img高度本身都一致的情况）

css的要注意 文本溢出 图片过大
js要注意按钮的频繁点击防刷，可以用button标签，通过设置disabled属性，点击事件委托方式,加事件时考虑是否是动态添加的元素，要给父级加的。
和ui保持一致

vue是每个组件 会分配一个data-随机数的属性
组件套组件 子组件会继承父组件的data-属性 并且自己会有自己的data-随机数 属性 用来唯一标识自己
会给所有的标签加
style标签的scoped属性，表示css选择器上有data-那个标识下的。所以即使是scoped的样式 只要有data-那个标识 就会生效

原生视频 当手指滑动视频到可视区域时 自动播放逻辑（用play方法播放） 正常浏览器可以，但是微信浏览器和公司app内 试了如下几种方法都不能实现:1,加autoplay属性 2，模拟触发在视频上的点击事件3，视频缓冲设置为全缓冲。

是video的poster属性，如果video有controls控制条，那么封面也会有控制条的，此时就得用img代替poster了。

关于gitlab提交冲突
本地自己的分支 是从master检出的，改了一些东西，需要先合并到test分支，测试通过后，才合到master分支，将自己的分支push上去 向test分支发起合并请求后，提示与现有test分支的代码冲突，如下

绿色是我的代码，蓝色是test上的代码
不知道为何冲突，不是应该自动合并吗
解决方案，目测有三

一：我在本地自己分支 修改合并 使得看起来不会冲突 ，然而再次操作后依然冲突。
二：按照官方的提示

解决了意思就是切到test分支，merge自己的分支 解决冲突，提交。

三：这种不太敢尝试，怕自己的分支会merge了 test分支（不能merge test的代码，这只分支是从master检出的纯净分支，不能有测试用的代码），据说会merge的，看他的commit信息。这是和二相反向的操作

//ios页面标题无效的解决办法

          document.setTitle = function(t) {
              document.title = t;
              var i = document.createElement("iframe");
              //i.src = "";////m.soyoung.com/favicon.ico
              i.style.display = "none";
              i.onload = function() {
                  setTimeout(function(){
                  i.remove();
                  }, 9)
              }
              document.body.appendChild(i);
          }

          setTimeout(()=>{
            document.setTitle(this.list.username)
          }, 50)

强类型转换的坑
条件1:用test正则返回的布尔值url.test(value) 结果返回true了；
条件2:let flag=parseInt(version[0])==7?(parseInt(version[1])<10?true:false):(parseInt(version[0])<7?true:false) 结果也返回true了。

if(条件1 && 条件2) 结果是false
需要写成if(条件1===true && 条件2===true)//结果是true

接口报302的错误，原因是接口需要先登录，所以在请求的header里加上登录的cookie，解决

补 行星环绕恒星 css效果

父集定义了宽度4rem，子集只有一个input标签，定义width:100%或不定义,有些兼容问题，就是这个input超出父集宽度好多，只能定义具体多宽

项目自己开的自己的分支，做需求，完成后因为要提到联调环境测试环境 自己看，因此会在gitbash来回切dev分支test分支，不知道什么原因，偶现 切的切的 就把自己的分支里的一些文件切没了，（这时gitbash没有提示已经切没了），后期要把master的分支 merge到自己的分支时 才提示 一些文件自己的分支没，master的有，gitbash报出一些提示比如
出现步骤：
1，merge master时 提示 切丢的文件create Permission denied （貌似是丢失的文件不是管理员权限不能在本分支create）
2，然后想从自己分支删除一些有麻烦的本地文件，再从远程重新拉取一遍（远程仓库是全的）提示，但并未把删除的文件拉取到本地。

3，在merge master一遍
之前已经提交过自己的分支了，这次的提示应该是要把切丢的提交一遍

然后只能在提交一遍，这些红框是切丢了的，好在本分支的需求没改这些文件，直接用master的就行

最后成功merge master 提交上线了。

原因：
大概项目的vscode打开，文件在vscode打开，切换太快，还没来得及？