資訊專欄INFORMATION COLUMN
摘要：今天遇到一個(gè)一直認(rèn)為很簡(jiǎn)單的問(wèn)題，真正接手后才知道這么可怕大體是這樣的，默認(rèn)動(dòng)態(tài)加載的應(yīng)該是自動(dòng)向下，當(dāng)遇到頁(yè)面最下面應(yīng)該自動(dòng)向上渲染。動(dòng)態(tài)生成的都是根據(jù)來(lái)監(jiān)聽獲取元素的信息。
今天遇到一個(gè)一直認(rèn)為很簡(jiǎn)單的問(wèn)題，真正接手后才知道這么可怕
大體是這樣的，默認(rèn)動(dòng)態(tài)加載的card應(yīng)該是自動(dòng)向下，當(dāng)card遇到頁(yè)面最下面應(yīng)該自動(dòng)向上渲染。
動(dòng)態(tài)生成的DOM都是根據(jù)id來(lái)監(jiān)聽獲取元素的信息。
入坑1：當(dāng)我一開始碰到這個(gè)bug時(shí)，so easy?。?！所以加了一個(gè)判斷條件，在函數(shù)@mouseenter獲取觸發(fā)點(diǎn)位置，然后加上一個(gè)頁(yè)面高度和頁(yè)面高度screen.height進(jìn)行對(duì)比，然后對(duì)card進(jìn)行移位，蒽，easy！??！
let rect = this.$el.getBoundingClientRect()
so,坑：很快，師傅過(guò)來(lái)啦，你這個(gè)寫死啦，擴(kuò)展性不好！內(nèi)心毫無(wú)波瀾，好，改成動(dòng)態(tài)！
進(jìn)坑2：Google一下，百度一天，怎么檢查新生成的DOM元素是否超出可視頁(yè)面！結(jié)果搜到一堆判斷scroll滾動(dòng)元素的邊境溢出！根本沒(méi)有智能的自動(dòng)檢查函數(shù)，我平時(shí)也看到過(guò)有的網(wǎng)站是可以實(shí)現(xiàn)自動(dòng)判斷，所以一定可以解決！證明只有程序袁才是萬(wàn)能的，代碼，呵！
so,坑：表示師傅看不下去啦，“你根據(jù)ID，利用$nextTick獲得更新后的元素信息來(lái)獲取DOM的信息！”
出坑4：so，小case【找了兩個(gè)小時(shí)，自閉】，通過(guò)this.$rootDOM樹來(lái)查到元素id，這樣找到的id每次都是動(dòng)態(tài)的啦！
進(jìn)坑3：?jiǎn)栴}很快來(lái)了，我通過(guò)id獲取到元素的高度啦，但是每次順序不對(duì)啊，每次dom渲染后在找到更新dom的信息。。。又仔細(xì)看了一下this.$nextTick(),en,DOM更新后，函數(shù)返回操作！??！換個(gè)思路，于是通過(guò)監(jiān)控DOM樹的變化來(lái)在第一時(shí)間來(lái)獲取到dom變化的id并且獲取DOM信息
let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener("DOMNodeInserted", function(){
let height=dom.getBoundingClientRect().height
}, false)
唉，結(jié)果和 $nextTick一毛一樣，扎心啦，而且在這個(gè)監(jiān)聽函數(shù)里面使用函數(shù)之后，會(huì)一直獲取到dom更新的信息，卡崩啦！
233,強(qiáng)行出來(lái):嗯嗯，天要亡我??！靜想，如果要實(shí)現(xiàn)避免動(dòng)態(tài)的card頁(yè)面生成到可視頁(yè)面外，大概兩種途徑，第一種動(dòng)態(tài)的判斷位置條件，另一種是通過(guò)更加生成位置再次調(diào)整！行吧，又回到坑3啦，顯示給位置一個(gè)默認(rèn)值，然后根據(jù)$nextTick()獲取到的dom信息，然后根據(jù)鼠標(biāo)位置，dom高度，可視化窗口高度document.body.clientHeight【上面的那個(gè)獲取到的是電腦的信息】來(lái)判斷，調(diào)整?。。?！
/苦笑/苦笑，有更好的方法，求告知?。?！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53547.html
摘要：今天遇到一個(gè)一直認(rèn)為很簡(jiǎn)單的問(wèn)題，真正接手后才知道這么可怕大體是這樣的，默認(rèn)動(dòng)態(tài)加載的應(yīng)該是自動(dòng)向下，當(dāng)遇到頁(yè)面最下面應(yīng)該自動(dòng)向上渲染。動(dòng)態(tài)生成的都是根據(jù)來(lái)監(jiān)聽獲取元素的信息。 今天遇到一個(gè)一直認(rèn)為很簡(jiǎn)單的問(wèn)題，真正接手后才知道這么可怕 大體是這樣的，默認(rèn)動(dòng)態(tài)加載的card應(yīng)該是自動(dòng)向下，當(dāng)card遇到頁(yè)面最下面應(yīng)該自動(dòng)向上渲染。showImg(https://segmentfault...
摘要：提示如需移除事件處理程序，請(qǐng)使用方法。說(shuō)明和綁定的點(diǎn)擊事件被的事件覆蓋。分析不同的綁定方式執(zhí)行順序?qū)傩栽厥录录?。元素綁定事件刪除按鈕。屬性綁定事件動(dòng)態(tài)綁定事件方法的方法的屬性綁定。 一、動(dòng)態(tài)監(jiān)聽加載對(duì)象 當(dāng)使用js或jQuery動(dòng)態(tài)創(chuàng)建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監(jiān)聽事件...
摘要：基于的動(dòng)態(tài)數(shù)據(jù)綁定歸屬于筆者的與前端工程化實(shí)踐中的，本文中設(shè)計(jì)的引用資料參考學(xué)習(xí)與實(shí)踐資料索引，如果有對(duì)基礎(chǔ)語(yǔ)法尚存疑惑的可以參閱現(xiàn)代開發(fā)語(yǔ)法基礎(chǔ)與實(shí)踐技巧。 基于 JSX 的動(dòng)態(tài)數(shù)據(jù)綁定歸屬于筆者的 React 與前端工程化實(shí)踐中的，本文中設(shè)計(jì)的引用資料參考 React 學(xué)習(xí)與實(shí)踐資料索引，如果有對(duì) JavaScript 基礎(chǔ)語(yǔ)法尚存疑惑的可以參閱現(xiàn)代 JavaScript 開發(fā)：語(yǔ)...
摘要：效率不高，很多多余，稱之為臟檢查。通過(guò)索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問(wèn)題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。 Vue通過(guò)簡(jiǎn)單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺(tái)MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...
摘要：采用了新舊的對(duì)比，獲取差異的，最后一次性的更新到真實(shí)上。對(duì)基本屬性進(jìn)行監(jiān)聽對(duì)對(duì)象進(jìn)行監(jiān)聽對(duì)對(duì)象某一個(gè)屬性監(jiān)聽監(jiān)聽自定義指令全局指令，第一個(gè)參數(shù)是指令名，第二個(gè)參數(shù)是一個(gè)對(duì)象，對(duì)象內(nèi)部有個(gè)的函數(shù)，函數(shù)里有這個(gè)參數(shù)，表示綁定了這個(gè)指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來(lái)構(gòu)建，當(dāng)其中一部分發(fā)生變化時(shí)，其實(shí)就是對(duì)應(yīng)某個(gè)DOM節(jié)點(diǎn)發(fā)生了變化，??...
閱讀 3142·2023-04-26 00:32
閱讀 592·2019-08-30 15:52
閱讀 2189·2019-08-30 15:52
閱讀 3495·2019-08-30 15:44
閱讀 3364·2019-08-30 14:09
閱讀 1497·2019-08-29 15:15
閱讀 3477·2019-08-28 18:12
閱讀 1182·2019-08-26 13:55
