滾動條
常見于移動端 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 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31480.html
標籤：JavaScript