成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM元素動態(tài)監(jiān)聽

wh469012917 / 2461人閱讀

摘要：今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕大體是這樣的，默認動態(tài)加載的應(yīng)該是自動向下，當遇到頁面最下面應(yīng)該自動向上渲染。動態(tài)生成的都是根據(jù)來監(jiān)聽獲取元素的信息。

今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕

大體是這樣的，默認動態(tài)加載的card應(yīng)該是自動向下，當card遇到頁面最下面應(yīng)該自動向上渲染。


動態(tài)生成的DOM都是根據(jù)id來監(jiān)聽獲取元素的信息。

坑1：當時數(shù)據(jù)較少沒有考慮到card渲染方向，所以在頁面下面的時候card加載到了瀏覽器可視界面之外啦

入坑1：當我一開始碰到這個bug時，so easy?。?！所以加了一個判斷條件，在函數(shù)@mouseenter獲取觸發(fā)點位置，然后加上一個頁面高度和頁面高度screen.height進行對比，然后對card進行移位，蒽，easy?。?！

let rect = this.$el.getBoundingClientRect()

so,坑：很快，師傅過來啦，你這個寫死啦，擴展性不好！內(nèi)心毫無波瀾，好，改成動態(tài)！

坑2：動態(tài)嘛，嗯嗯，就是換成動態(tài)判斷條件就行

進坑2：Google一下，百度一天，怎么檢查新生成的DOM元素是否超出可視頁面！結(jié)果搜到一堆判斷scroll滾動元素的邊境溢出！根本沒有智能的自動檢查函數(shù)，我平時也看到過有的網(wǎng)站是可以實現(xiàn)自動判斷，所以一定可以解決！證明只有程序袁才是萬能的，代碼，呵！

so,坑：表示師傅看不下去啦，“你根據(jù)ID，利用$nextTick獲得更新后的元素信息來獲取DOM的信息！”

坑3：調(diào)研一下$nextTick()函數(shù)，DOM更新后返回$nextTick()里的操作，蒽。 坑4：立馬開始獲取動態(tài)彈出card的id，嗯嗯嗯嗯，找到了，通過控制臺找到的，由于我用的是一個組件沒有使用ref來注釋，

出坑4：so，小case【找了兩個小時，自閉】，通過this.$rootDOM樹來查到元素id，這樣找到的id每次都是動態(tài)的啦！

進坑3：問題很快來了，我通過id獲取到元素的高度啦，但是每次順序不對啊，每次dom渲染后在找到更新dom的信息。。。又仔細看了一下this.$nextTick(),en,DOM更新后，函數(shù)返回操作！??！換個思路，于是通過監(jiān)控DOM樹的變化來在第一時間來獲取到dom變化的id并且獲取DOM信息

let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener("DOMNodeInserted", function(){
   let height=dom.getBoundingClientRect().height    
}, false)

唉，結(jié)果和 $nextTick一毛一樣，扎心啦，而且在這個監(jiān)聽函數(shù)里面使用函數(shù)之后，會一直獲取到dom更新的信息，卡崩啦！

233,強行出來:嗯嗯，天要亡我！！靜想，如果要實現(xiàn)避免動態(tài)的card頁面生成到可視頁面外，大概兩種途徑，第一種動態(tài)的判斷位置條件，另一種是通過更加生成位置再次調(diào)整！行吧，又回到坑3啦，顯示給位置一個默認值，然后根據(jù)$nextTick()獲取到的dom信息，然后根據(jù)鼠標位置，dom高度，可視化窗口高度document.body.clientHeight【上面的那個獲取到的是電腦的信息】來判斷，調(diào)整！?。?！

/苦笑/苦笑，有更好的方法，求告知?。?！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53547.html

相關(guān)文章

  • DOM元素動態(tài)監(jiān)聽

    摘要：今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕大體是這樣的，默認動態(tài)加載的應(yīng)該是自動向下，當遇到頁面最下面應(yīng)該自動向上渲染。動態(tài)生成的都是根據(jù)來監(jiān)聽獲取元素的信息。 今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕 大體是這樣的，默認動態(tài)加載的card應(yīng)該是自動向下，當card遇到頁面最下面應(yīng)該自動向上渲染。showImg(https://segmentfault...

    codercao 評論0 收藏0

  • 【JavaScript系列】動態(tài)綁定事件方法：(1)jquery的on方法；(2)html元素綁定

    摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執(zhí)行順序?qū)傩栽厥录录Ｔ亟壎ㄊ录h除按鈕。屬性綁定事件動態(tài)綁定事件方法的方法的屬性綁定。 一、動態(tài)監(jiān)聽加載對象 當使用js或jQuery動態(tài)創(chuàng)建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監(jiān)聽事件...

    young.li 評論0 收藏0

  • 基于 JSX 的動態(tài)數(shù)據(jù)綁定

    摘要：基于的動態(tài)數(shù)據(jù)綁定歸屬于筆者的與前端工程化實踐中的，本文中設(shè)計的引用資料參考學(xué)習(xí)與實踐資料索引，如果有對基礎(chǔ)語法尚存疑惑的可以參閱現(xiàn)代開發(fā)語法基礎(chǔ)與實踐技巧。 基于 JSX 的動態(tài)數(shù)據(jù)綁定歸屬于筆者的 React 與前端工程化實踐中的，本文中設(shè)計的引用資料參考 React 學(xué)習(xí)與實踐資料索引，如果有對 JavaScript 基礎(chǔ)語法尚存疑惑的可以參閱現(xiàn)代 JavaScript 開發(fā)：語...

    Sleepy 評論0 收藏0

  • Vue_Vue權(quán)威指南

    摘要：效率不高，很多多余，稱之為臟檢查。通過索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

    SimonMa 評論0 收藏0

  • 前端面試匯總VUE(二)

    摘要：采用了新舊的對比，獲取差異的，最后一次性的更新到真實上。對基本屬性進行監(jiān)聽對對象進行監(jiān)聽對對象某一個屬性監(jiān)聽監(jiān)聽自定義指令全局指令，第一個參數(shù)是指令名，第二個參數(shù)是一個對象，對象內(nèi)部有個的函數(shù)，函數(shù)里有這個參數(shù)，表示綁定了這個指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來構(gòu)建，當其中一部分發(fā)生變化時，其實就是對應(yīng)某個DOM節(jié)點發(fā)生了變化，??...

    Sanchi 評論0 收藏0

發(fā)表評論

0條評論

wh469012917

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<