乐趣区

前端开发中遇到的一些问题持续更新

jiezi

页面两个 div 之间有一个小 margin，样式怎么改都去不掉

解决：html 中 div 换行了，把两个 div 放到同一行可以解决，还有一种好办法就是使用 flex。

app 上点击有背景

解决：全局添加样式-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

手机端 input 边框阴影

解决：添加-webkit-appearance: none;

chrome 模拟器里点击元素错位

解决：我把百分比改成 fit to window 好了，也可以来回切换几次机型。

git push 报错RPC failed; curl 55 SSLWrite() returned error -9805

解决：一次性提交代码太多导致，使用 git log 找到最近一次 commit 的代码，git reset {id}回退到 commit 前的状态，再分批次提交。

代码丢失，git log 找不到

解决：git reset --hard xxx的记录，使用git reflog。

sudo nginx -s reload 启动 nginx 报错：nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)

解决：sudo nginx -c /usr/local/etc/nginx/nginx.conf => sudo nginx -s reload

input 中 type 为 number 时 maxlength 失效

解决：input type="tel"

微信授权 callback 有多个参数，出现丢失的情况。

解决：因为授权接口中 & 的多个参数会变成整个接口地址的参数，所以需要对 & 进行加密，使用 var callbackurl = encodeURIComponent(window.location.href) 进行加密

滚动不顺畅

解决：添加样式

-webkit-overflow-scrolling: touch;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

事件冒泡

解决：stopPropagation,cancelBubble(ie)

移入移出多次触发

解决：mouseleave 对子元素不生效，不会冒泡

安装 navicat，完成后提示文件损坏

解决：打开终端，输入sudo spctl --master-disable

docsify 配置的搜索功能失效

解决：回到文档首页（文档根目录），打开控制面板，找到 localstorage，删除 docsify.search.index 和 docsify.search.expires，刷新页面。

textarea 里输入的换行、空格直接存到所需样式的 div 里时，没效果。

解决：转义一下，空格替换成 &nbsp; 换行 rn 换为 <br>，template 里使用{{{}}} 而非 {{}} 解析。

nl2br: function (str, idx, tag, isXhtml) {
  let blankTag = '&nbsp;'
  let breakTag = (isXhtml || typeof isXhtml === 'undefined') ? '<br />' : '<br>'
  let newStr = (str + '').replace(/([^>\s]?)(\s)/g,'$1'+ blankTag +'$2')
  newStr = (newStr + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g,'$1'+ breakTag +'$2')
  if (tag) {this.changeData[idx][tag] = newStr
  }
  return newStr
}

还可直接添加样式white-space: pre-wrap;

html2canvas 画出来的图片模糊

解决：只要这个 html 整体放大一倍，图片再缩小一倍就可以解决了

html2canvas 把 html 页面存成图片时，图片不全

解决：先记录当前 scrollTop 值，window.scrollTo(0,0)到顶部，然后画图，就可以解决了，完了再回到原来的 scroll 位置。

git 拉取代码报错：Permission denied (publickey)

解决：

j .ssh
git config --global user.name "***"
git config --global user.email "***@163.com"
ssh-keygen -t rsa -C "***@163.com"

拷贝：id_rsa.pub
放到 https://git.oschina.net/keys 的 ssh 里

点击事件失效

解决：使用 css pointer-events: none;直接穿透当前 div

类似微信，左滑动出现当前 li 的一些操作 mask，touchmove 在手机上失效

解决：在 touchmove 里使用一个阈值，Math.abs(endY-startY) 是否大于 10，来决定是否 preventDefault。

webpack 打包时，No ESLint configuration found

解决：项目中缺少.eslintrc.js 文件，手动在根目录添加上。

七牛图片上传，下载文件名改名称

解决：普通的 a 标签下载，只需要在后面加上 download=“1223”。七牛上是在 href 链接后面添加“？download/name”

new Vue 时报错 error Do not use ‘new’ for side effects

解决：报错内容上方添加 / eslint-disable no-new /

h5 获取地理位置信息时，用户第一次拒绝，后面一直都弹窗用户拒绝信息。

解决：android，设置 -》应用程序管理器 -》互联网（自带或安装的其他浏览器）-》权限 -》位置信息（重启此开关）

新建 js 代码经常报错 import declarations not support by current javascript version

解决：webstorm =》perference =》languages & frameworks =》javascript =》右侧选择 ecmascript6

android 微信里播放 video，播放完了以后，关闭之后，video 一直处在最顶层，z-index 失效。

解决：网上很多地方都没有找到答案，官网上说是无解的，走了个小弯路。关闭 video 时，把当前 video 存一下，然后找到父级，删除 video 再给父级 innerHTML video 问题大致解决，目前只想到了这么个方法。

let thisNode = this
let parentNode = thisNode.parentNode
parentNode.removeChild(this)
parentNode.innerHTML = thisNode.outerHTML

chrome 浏览器调试的时候，chrome://inspect 连接手机之后，一片空白

解决：因为 chrome 调试之初需要连 chrome 服务器，所以存在翻墙问题，翻墙后就可以查看 dom 了

mysql 连接报错：ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password: YES)

解决：系统偏好设置 -》最下面 mysql-》进入 -》点击 initialize database-》输入密码，连解时也输入这个密码。

mysql 连接池错误：Client does not support authentication protocol requested by server; consider upgrading MySQL client

解决：navicat 新建查询输入：ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码'

提取出来的头部，点击打开遮罩层，滚动时，底部跟着滚动。

解决：监听遮罩层状态，body 位置改为 fixed，此时每次关闭遮罩层时，页面都回到最顶部，是因为 fixed 脱离了文档流，所以应该先记录当前位置，position 置为 static 时再定位到原先位置。代码如下：

  status (status) {if (status === 'open') {this.scrollY = window.scrollY}
    document.body.style.position = status === 'close' ? 'static' : 'fixed'
    window.scrollTo(0, this.scrollY)
  }

如果遮罩层的页面只有一页，且无需滚动的时候，只要禁用 touchmove 就可以了@touchmove.prevent，无需过多操作。

不同商品页，id 变化，商品不变

解决：监听 $route 变化，然后获取 id 重新去取数据。

swiper 插件的轮播图循环时，上面添加的点击事件失效

解决：点击事件不绑定在 swiper-slide 上，添加在 on 中。原因是循环时，swiper 复制了几份 swiper-slide，然而却没有复制它的事件，所以导致事件时而生效，时而失效，事实上，当 swiper-slide 在第一个时，右滑页面，使其滚动到最后一个，这时点击失效必现。

  new Swiper('.first-block', {
    loop: true,
    paginationClickable: true,
    parallax: true,
    setWrapperSize: true,
    on: {click: function () {
        // 当前活动块的索引，与 activeIndex 不同的是，在 loop 模式下不会将 复制的块 的数量计算在内。const realIndex = this.realIndex
        vm.handleJumpe(vm.indexSwiperList[realIndex].href, {})
      }
    }
  })

火狐浏览器中，锚点链接失效。

解决：引起问题的原因是 iframe。锚点链接放在 iframe 中，iframe + href 在火狐中不兼容，解决办法是判断是否是火狐浏览器，如果是，计算锚点 id 距离顶部的距离，然后滚动到此 id 位置。

退出移动版