? ? ? 項目中需要做一個滾動到底部加載更多數(shù)據(jù)的效果，前端用的框架是element-ui，第一反應(yīng)是去查看說明文檔，”InfiniteScroll 無限滾動“幾個大字自帶光環(huán)映入眼簾，心中一陣竊喜，按照實例一頓操作猛如虎，事實證明照搬一時爽，調(diào)試毀終身。??
第一個不符合預(yù)期的就是，并沒有如文檔上說的是滾動到底部再加載更多數(shù)據(jù)，而是一次性請求完所有頁碼。
這個有點(diǎn)上頭......網(wǎng)上找了很多資料最后對比demo的css發(fā)現(xiàn)，區(qū)別在于滾動的容器沒有固定高度，于是我當(dāng)機(jī)立斷當(dāng)加上高度，奇跡出現(xiàn)了，終于不再無限加載......隨之而來有了新的問題。
這里卑微的我有個小小的建議，官方文檔是不是可以加一個注意事項。
? ? ?第二個問題就是頁面初始化后，再點(diǎn)擊搜索，數(shù)據(jù)接口只請求一次了，不再把容器填滿，滾動也不再加載數(shù)據(jù)了，心噻......,秉著有問題找度娘的精神，我翻江倒海的找啊找，竟然沒有發(fā)現(xiàn)跟我雷同的問題，但是有個問題讓我印象深刻，有個朋友是說從詳情頁切換回到列表頁的時候，發(fā)現(xiàn)數(shù)據(jù)無限加載，滾動失效之類，把v-if改成v-show就醫(yī)好了，v-if不會保留dom結(jié)構(gòu)所以初始化會失敗，但是我這里并沒有設(shè)置v-if啊啊啊，但是我“初始化”這幾個字深深的留在我的腦海中，不管三七二十一我注釋了一行跟初始化有關(guān)的代碼。哈哈，先附上最終html結(jié)構(gòu)代碼，
其中，dataList是每頁請求數(shù)據(jù)concat而來的，所以每次搜索的加載新數(shù)據(jù)的時候，我都要對dataList做清空處理。當(dāng)我把dataList=[]這行代碼注釋掉，再測試的時候，奇跡出現(xiàn)了，滾動加載一切正常，不正常的是數(shù)據(jù)，當(dāng)然這個是在情理之中的。太驚喜太意外了，有沒有，其實這個不難理解，我做搜索操作的時候修改了dataList的長度，但是滾動條的位置卻沒有更改，所以難怪會失效，本身這個效果的原理就比較簡單的。既然頁面初始化的時候是正常的，那我何不在搜索的時候模擬一個同樣的場景，一不做二不休，干脆對容器來個初始化，加個v-if，就是這個小小的不經(jīng)意的舉動問題完美解決。有時候就是這樣的，山窮水盡疑無路，柳暗花明又一村。說實話，v-if真的幫我解決了不少不好描述的問題的，有時間再聊......
