Vue完美記住滾動條和實現下拉加載

滾動條

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

問題描述

當咱們在開發 web app 的時候，常常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，而後返回列表頁面的時候，很難去還原滾動條的狀態，沒法記住進來時候的位置。

之前我嘗試過不少方法：

1. 有 vue-router 自帶的 scrollBehavior，須要記住 scrollTop，而後還原，可是管理這個 scrollTop 顯得很麻煩，有的時候還不容易取值
2. 還有使用純 CSS 的方式，在列表頁面放置一個 router-view,詳情頁面利用 position 和 z-index 覆蓋列表頁面，返回後直接顯示的就是原來的列表頁面，這個必須把各層頁面路由預先配置好，否則就會顯示混亂了，而且同一個頁面出如今不一樣的子路由下，須要配置屢次，好比商品詳情須要配置在不少個地方，形成冗餘

以上解決方案都不理想

解決方案

後來我參考 keep-alive 開發了 vue-page-stack 來保存 Vue 頁面的棧，即 Vue 中的虛擬 dom，可是滾動條的問題仍然沒解決。由於虛擬 dom 沒有記錄各個組件的滾動狀態，因此沒法恢復。

在我使用 cube-ui 的時候發現，使用這個組件庫裏面的滾動容器，是能夠還原出滾動條的，進一步發現是黃軼老師的 better-scroll 的緣由。

經過查看 bs 的源碼發現，原來是 bs 的內部實現不是原生滾動，而是記錄一些滾動的信息，其中最重要的就是 x 和 y，也就是滾動的值，本身實現了一套滾動行爲經過 transform 去實現，在還原虛擬 dom 的時候，滾動的信息也被還原了。

最終就是 vue-page-stack + bs 能夠完美實現頁面棧的還原

下拉加載

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

問題描述

絕大多數滾動場景都是上拉加載，上拉加載的時候，加載的內容在滾動區域的下方出現，加載以後，咱們將數據添加到列表，由 Vue 等負責渲染新加載的內容，咱們繼續上拉就能夠繼續滾動查看。

但在咱們的場景下，在某一會話中翻閱消息記錄的時候，是下拉加載更多消息，加載後，繼續下拉慢慢滾動查看。這就致使了一個很嚴重的問題：下拉加載後出現的內容在滾動區域的上方，不作任何處理的話加載後會直接跳到新加載內容的最上方，由於滾動距離沒變，這就出問題了，和咱們想實現的不一致。

解決方案

也想了不少的方法，包括計算新增長消息的總長度，而後滾回來，可是消息的類型和高度不一致，計算會有偏差。

最終想到的處理辦法就是：

1. 經過接口獲取到加載信息後首先標記（使用 shouldScroll 標記）後端返回的第一條信息，也就是加載後咱們的視角要看到的新內容
2. messageList 更新後，Vue 會更新數據和視圖，這時候頁面 dom 被更新了
3. MessageItem 組件 mounted 後，這時候已經完成了視圖的渲染，經過檢查標記（shouldScroll）,通知父容器滾動到剛纔標記的位置，也就是加載的第一條信息處，這樣也就把渲染和滾動作到一塊兒了

以上兩個問題在下圖均有體現，效果還能夠，以下：

以上內容在個人即時通信應用客戶端中均有體現，歡迎查看源碼

現已部署上線，歡迎體驗客戶端和管理端