點擊查看更多在前端頁面中運用特別多，但是做好里面的細節(jié)方面還是需要揣摩一下
我們一步一步開始這里面的情況和步驟吧
首先微姊，我們來看一個最簡單的情況： 一次性請求完所有的數(shù)據(jù)
1. 這樣的情況咆畏，會一次性請求所有的數(shù)據(jù)回來安聘，直接將全部數(shù)據(jù)遍歷到列表
2. 接著就是根據(jù)需要 " 設定父元素的高度并且overflow達到遮攔的效果 " 并且設定一個button的點擊事件腔呜，點擊之后把高度設定去除
3. 去除高度（{height: auto}）之后就把 “點擊查看更多” 字眼換成 “收起”
另外崇呵，如果點擊收起出爹，瀏覽器會記錄當前的scrollTop
也就是說點擊收起之后scrollTop會變成之前沒有收起時候的scrollTop（顯示效果就是會定位到屏幕更加下方的位置）
會造成不美觀也不符合用戶習慣
解決辦法：
所以這邊我們需要在點擊 “查看更多” 的時候記錄下當前頁面的scrollTop并且賦值給一個變量存放庄吼。
再次點擊 “收起” 按鈕的時候我們把scrollTop賦值為剛剛存放的變量就能還原之前的操作啦
Expand () {
if (this.viewMore === false) { // 判斷當前用戶有沒有展開
this.viewMore = true
// 收起回到用戶點擊查看更多時的定位
document.body.scrollTop = this.scroll
// alert(this.scroll)
} else {
// 記錄下來用戶滑動到的位置，下面會收起到這個位置
let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
this.scroll = scrollTop
// alert(this.scroll)
this.viewMore = false
}
}
image.png
接著我們來看需要數(shù)據(jù)請求的查看更多
1. 這樣的情況严就，會比較類似分頁总寻，第一次請求數(shù)據(jù)，然后第二次繼續(xù)請求數(shù)據(jù)之后將兩次的數(shù)據(jù)進行拼接
2. 因為排行榜會實時更新梢为，所以我們請求的數(shù)據(jù)需要保證之前分頁請求的數(shù)據(jù)是不變的渐行，每次請求回來之后我們提供列表最后那個的id，后臺請求這個id后面的數(shù)據(jù)铸董，當然這也是不準確的祟印。
3. 接下來的操作其實是跟上面的類似
