滾動條

常見于移動端 App 在滾動點擊進入的時候

問題描述

當我們在開發(fā) web app 的時候，經(jīng)常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然后返回列表頁面的時候，很難去還原滾動條的狀態(tài)，無法記住進來時候的位置。
以前我嘗試過很多方法：

1. 有 vue-router 自帶的 scrollBehavior，需要記住 scrollTop，然后還原，但是管理這個 scrollTop 顯得很麻煩，有的時候還不容易取值還有使用純 CSS 的方式，在列表頁面放置一個 router-view,詳情頁面利用 position 和 z-index 覆蓋列表頁面，返回后直接顯示的就是原來的列表頁面，這個必須把各層頁面路由預(yù)先配置好，不然就會顯示混亂了，并且同一個頁面出現(xiàn)在不同的子路由下，需要配置多次，比如商品詳情需要配置在很多個地方，造成冗余
2. 以上解決方案都不理想
   

解決方案

后來我參考 keep-alive 開發(fā)了 vue-page-stack 來保存 Vue 頁面的棧，即 Vue 中的虛擬 dom，但是滾動條的問題仍然沒解決。因為虛擬 dom 沒有記錄各個組件的滾動狀態(tài)，所以無法恢復。

在我使用 cube-ui 的時候發(fā)現(xiàn)，使用這個組件庫里面的滾動容器，是可以還原出滾動條的，進一步發(fā)現(xiàn)是黃軼老師的 better-scroll 的原因。

通過查看 bs 的源碼發(fā)現(xiàn)，原來是 bs 的內(nèi)部實現(xiàn)不是原生滾動，而是記錄一些滾動的信息，其中最重要的就是 x 和 y，也就是滾動的值，自己實現(xiàn)了一套滾動行為通過 transform 去實現(xiàn)，在還原虛擬 dom 的時候，滾動的信息也被還原了。

最終就是 vue-page-stack + bs 可以完美實現(xiàn)頁面棧的還原

下拉加載

這個問題多見于消息記錄等查詢，在小程序中也會這遇到這樣的問題

問題描述

絕大多數(shù)滾動場景都是上拉加載，上拉加載的時候，加載的內(nèi)容在滾動區(qū)域的下方出現(xiàn)，加載之后，我們將數(shù)據(jù)添加到列表，由 Vue 等負責渲染新加載的內(nèi)容，我們繼續(xù)上拉就可以繼續(xù)滾動查看。

但在我們的場景下，在某一會話中翻閱消息記錄的時候，是下拉加載更多消息，加載后，繼續(xù)下拉慢慢滾動查看。這就導致了一個很嚴重的問題：下拉加載后出現(xiàn)的內(nèi)容在滾動區(qū)域的上方，不做任何處理的話加載后會直接跳到新加載內(nèi)容的最上方，因為滾動距離沒變，這就出問題了，和我們想實現(xiàn)的不一致。

解決方案

也想了很多的方法，包括計算新增加消息的總長度，然后滾回來，但是消息的類型和高度不一致，計算會有誤差。
最終想到的處理辦法就是：

1. 通過接口獲取到加載信息后首先標記（使用 shouldScroll 標記）后端返回的第一條信息，也就是加載后我們的視角要看到的新內(nèi)容
2. messageList 更新后，Vue 會更新數(shù)據(jù)和視圖，這時候頁面 dom 被更新了
3. MessageItem 組件 mounted 后，這時候已經(jīng)完成了視圖的渲染，通過檢查標記（shouldScroll）,通知父容器滾動到剛才標記的位置，也就是加載的第一條信息處，這樣也就把渲染和滾動做到一起了
   

以上兩個問題在下圖均有體現(xiàn)，效果還可以，如下：

以上內(nèi)容在我的即時通訊應(yīng)用客戶端中均有體現(xiàn)，歡迎查看源碼

總結(jié)

到此這篇關(guān)于Vue記住滾動條和實現(xiàn)下拉加載的完美方法的文章就介紹到這了,更多相關(guān)Vue滾動條和下拉加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！