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

2018/3/2

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的文件的右键属性里 不让其只读

2018/3/5

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里的目录要从根目录写起（绝对目录）或直接文件名（全局搜索匹配）

20180306

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

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

20180312

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,用来指定请求内容的数据编码格式
但是结果不会返回对象 而是如图

20180313

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

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

20180315

video视频原生封装

20180321

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

<div id="father">11111111111
        <div id="son">2222
            <div id="subson">333</div>
        </div>
    </div>
    <script>
        var father=document.getElementById('father')
        var son=document.getElementById('son')
        var subson=document.getElementById('subson')
        father.addEventListener('click',function(ev){
            console.log(ev.target)
            if(ev.target.id=='son'){
                console.log(55)
            }
        },true)//or false,the result is the same
    </script>

20180404

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

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

20180409

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

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

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

20180425

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)

20180427

实现页面锚定的三种方法
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'

20180613

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格式请求参数)

20180621

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

20180622

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

20180627

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

20180702

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

20180704

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

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

20180719

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

20180803

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

20180813

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

20180828

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

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

20180829

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

20180901

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

20180912

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

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

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

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

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

20181016

//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

20181023

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

20181108

补 行星环绕恒星 css效果

<svg viewBox="0 0 750 1206" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="leaves"><g fill="none" fill-rule="evenodd"><image width="22" height="25" transform="rotate(209.85 52.4625 52.4625)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<%=baseImgPath%>my2017/1ye.png"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 90 90" dur="8s" repeatCount="indefinite"></animateTransform><animateMotion begin="-1s" dur="4s" rotate="auto" repeatCount="indefinite"><mpath xlink:href="#a"></mpath></animateMotion></image><image width="50" height="76" transform="rotate(209.85 52.4625 52.4625)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<%=baseImgPath%>my2017/2ye.png"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 90 90" dur="8s" repeatCount="indefinite"></animateTransform><animateMotion begin="0s" dur="4s" rotate="auto" repeatCount="indefinite"><mpath xlink:href="#b"></mpath></animateMotion></image><image width="74" height="50" transform="rotate(209.85 52.4625 52.4625)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<%=baseImgPath%>my2017/3ye.png"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 90 90" dur="8s" repeatCount="indefinite"></animateTransform><animateMotion begin="-2s" dur="4s" rotate="auto" repeatCount="indefinite"><mpath xlink:href="#c"></mpath></animateMotion></image>
                                            <image width="50" height="34" transform="rotate(209.85 52.4625 52.4625)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<%=baseImgPath%>my2017/4ye.png"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 90 90" dur="8s" repeatCount="indefinite"></animateTransform><animateMotion begin="-3s" dur="4s" rotate="auto" repeatCount="indefinite"><mpath xlink:href="#c"></mpath></animateMotion></image><path d="M674.09-33.84C342.94 353.33 88.03 549.27-90.66 553.98" id="a"></path><path d="M974.22 306.2c-345.6 324.3-717.6 508.26-1115.97 551.88" id="b"></path><path d="M921.06-37.36C534.4 384.5 160.91 638.24-199.39 723.84" id="c"></path></g></svg>

20181206

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

20181210

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

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

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

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

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