滾動條 常見於移動端 App 在滾動點擊進入的時候 問題描述 當我們在開發 web app 的時候，經常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然後返回列表頁面的時候，很難去還原滾動條的狀態，無法記住進來時候的位置。 以前我嘗試過很多方法： 有 vue-router 自帶的 ...
滾動條
常見於移動端 App 在滾動點擊進入的時候
問題描述
當我們在開發 web app 的時候，經常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然後返回列表頁面的時候，很難去還原滾動條的狀態，無法記住進來時候的位置。
以前我嘗試過很多方法：
- 有 vue-router 自帶的 scrollBehavior，需要記住 scrollTop，然後還原，但是管理這個 scrollTop 顯得很麻煩，有的時候還不容易取值
- 還有使用純 CSS 的方式，在列表頁面放置一個 router-view,詳情頁面利用 position 和 z-index 覆蓋列表頁面，返回後直接顯示的就是原來的列表頁面，這個必須把各層頁面路由預先配置好，不然就會顯示混亂了，並且同一個頁面出現在不同的子路由下，需要配置多次，比如商品詳情需要配置在很多個地方，造成冗餘
3、要註意：光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
以上解決方案都不理想
解決方案
後來我參考 keep-alive 開發了 vue-page-stack 來保存 Vue 頁面的棧，即 Vue 中的虛擬 dom，但是滾動條的問題仍然沒解決。因為虛擬 dom 沒有記錄各個組件的滾動狀態，所以無法恢復。
在我使用 cube-ui 的時候發現，使用這個組件庫裡面的滾動容器，是可以還原出滾動條的，進一步發現是黃軼老師的 better-scroll 的原因。
通過查看 bs 的源碼發現，原來是 bs 的內部實現不是原生滾動，而是記錄一些滾動的信息，其中最重要的就是 x 和 y，也就是滾動的值，自己實現了一套滾動行為通過 transform 去實現，在還原虛擬 dom 的時候，滾動的信息也被還原了。
最終就是 vue—page-stack + bs 可以完美實現頁面棧的還原
下拉載入
這個問題多見於消息記錄等查詢，在小程式中也會這遇到這樣的問題
問題描述
絕大多數滾動場景都是上拉載入，上拉載入的時候，載入的內容在滾動區域的下方出現，載入之後，我們將數據添加到列表，由 Vue 等負責渲染新載入的內容，我們繼續上拉就可以繼續滾動查看。
但在我們的場景下，在某一會話中翻閱消息記錄的時候，是下拉載入更多消息，載入後，繼續下拉慢慢滾動查看。這就導致了一個很嚴重的問題：下拉載入後出現的內容在滾動區域的上方，不做任何處理的話載入後會直接跳到新載入內容的最上方，因為滾動距離沒變，這就出問題了，和我們想實現的不一致。
解決方案
也想了很多的方法，包括計算新增加消息的總長度，然後滾回來，但是消息的類型和高度不一致，計算會有誤差。
最終想到的處理辦法就是：
- 通過介面獲取到載入信息後首先標記（使用 shouldScroll 標記）後端返回的第一條信息，也就是載入後我們的視角要看到的新內容
- messageList 更新後，Vue 會更新數據和視圖，這時候頁面 dom 被更新了
- MessageItem 組件 mounted 後，這時候已經完成了視圖的渲染，通過檢查標記（shouldScroll）,通知父容器滾動到剛纔標記的位置，也就是載入的第一條信息處，這樣也就把渲染和滾動做到一起了
以上兩個問題在下圖均有體現，效果還可以，如下：
以上內容在我的即時通訊應用客戶端中均有體現，歡迎查看源碼，另外要註意：光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理
