踩坑日記(持續更新...)

時間  2019-12-05
標籤 日記 持續 更新 简体版
原文   原文鏈接

2018/3/2

1,vue的{{}}怎麼失效了
項目使用了twig模板渲染 語法{{}}衝突，使用v-text v-html渲染 能夠寫表達式的寫法" '字符'+變量 "
2，函數防抖節流封裝
實用的下拉加載更多代碼demo
給滾動事件綁定以下代碼javascript

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的文件的右鍵屬性裏 不讓其只讀css

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.html

多試了幾回 彈出.git 的.MERGE_MSG什麼的linux操做界面 而後按照提示:recover 最後:wq 再git push提交成功了 應該是網速較慢致使沒上傳或下載成功
2,gitignore裏的目錄要從根目錄寫起（絕對目錄）或直接文件名（全局搜索匹配）vue

20180306

用nodemon啓動服務器 前一陣仍是每次上班都要執行一下命令，在後來啓動服務器報錯
圖片描述java

應該是服務器本身啓動了 端口占用了 殺掉手動啓動的 依然能訪問本地服務器 應該是電腦的什麼問題 看任務管理器 把進程裏全部的node.exe殺掉 好了node

20180312

video和img自身是有寬高比例的，不設置樣式的話，頁面就是展現它自身的大小，若是隻設置寬，不設置高，他們會根據比例，自動展現多少高度,只設置高度同理。linux

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"）。ios

　　知道了問題產生的緣由，就好對症下藥解決問題了，其實就是要消除baseline對齊方式產生的距離。git

　　因此方法一，很容易想到，把對齊方式改一下不就行了，因而設置img的vertical-align屬性爲bottom；ajax

　　方法二就是上文說的給父元素加上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

clipboard.png

原生寫的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,用來指定請求內容的數據編碼格式
可是結果不會返回對象 而是如圖

clipboard.png

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>

clipboard.png

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 地圖插件 用了報錯以下

clipboard.png

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保持一致

clipboard.png

clipboard.png

clipboard.png

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分支的代碼衝突，以下

clipboard.png

clipboard.png

綠色是個人代碼，藍色是test上的代碼
不知道爲什麼衝突，不是應該自動合併嗎
解決方案，目測有三

一：我在本地本身分支 修改合併 使得看起來不會衝突 ，然而再次操做後依然衝突。
二：按照官方的提示

clipboard.png

解決了意思就是切到test分支，merge本身的分支 解決衝突，提交。

三：這種不太敢嘗試，怕本身的分支會merge了 test分支（不能merge test的代碼，這隻分支是從master檢出的純淨分支，不能有測試用的代碼），聽說會merge的，看他的commit信息。這是和二相反向的操做

clipboard.png

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，而後想從本身分支刪除一些有麻煩的本地文件，再從遠程從新拉取一遍（遠程倉庫是全的）提示，但並未把刪除的文件拉取到本地。

clipboard.png

3，在merge master一遍
以前已經提交過本身的分支了，此次的提示應該是要把切丟的提交一遍
clipboard.png

而後只能在提交一遍，這些紅框是切丟了的，好在本分支的需求沒改這些文件，直接用master的就行
clipboard.png
最後成功merge master 提交上線了。

緣由：大概項目的vscode打開，文件在vscode打開，切換太快，還沒來得及？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程