Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法
滾動(dòng)條
常見于移動(dòng)端 App 在滾動(dòng)點(diǎn)擊進(jìn)入的時(shí)候
問題描述
當(dāng)我們在開發(fā) web app 的時(shí)候，經(jīng)常會(huì)遇到一個(gè)問題，就是當(dāng)從一個(gè)可滾動(dòng)的列表頁進(jìn)入到下一個(gè)詳情頁面，然后返回列表頁面的時(shí)候，很難去還原滾動(dòng)條的狀態(tài)，無法記住進(jìn)來時(shí)候的位置。
以前我嘗試過很多方法：
- 有 vue-router 自帶的 scrollBehavior，需要記住 scrollTop，然后還原，但是管理這個(gè) scrollTop 顯得很麻煩，有的時(shí)候還不容易取值還有使用純 CSS 的方式，在列表頁面放置一個(gè) router-view,詳情頁面利用 position 和 z-index 覆蓋列表頁面，返回后直接顯示的就是原來的列表頁面，這個(gè)必須把各層頁面路由預(yù)先配置好，不然就會(huì)顯示混亂了，并且同一個(gè)頁面出現(xiàn)在不同的子路由下，需要配置多次，比如商品詳情需要配置在很多個(gè)地方，造成冗余
- 以上解決方案都不理想
解決方案
后來我參考 keep-alive 開發(fā)了 vue-page-stack 來保存 Vue 頁面的棧，即 Vue 中的虛擬 dom，但是滾動(dòng)條的問題仍然沒解決。因?yàn)樘摂M dom 沒有記錄各個(gè)組件的滾動(dòng)狀態(tài)，所以無法恢復(fù)。
在我使用 cube-ui 的時(shí)候發(fā)現(xiàn)，使用這個(gè)組件庫里面的滾動(dòng)容器，是可以還原出滾動(dòng)條的，進(jìn)一步發(fā)現(xiàn)是黃軼老師的 better-scroll 的原因。
通過查看 bs 的源碼發(fā)現(xiàn)，原來是 bs 的內(nèi)部實(shí)現(xiàn)不是原生滾動(dòng)，而是記錄一些滾動(dòng)的信息，其中最重要的就是 x 和 y，也就是滾動(dòng)的值，自己實(shí)現(xiàn)了一套滾動(dòng)行為通過 transform 去實(shí)現(xiàn)，在還原虛擬 dom 的時(shí)候，滾動(dòng)的信息也被還原了。
最終就是 vue-page-stack + bs 可以完美實(shí)現(xiàn)頁面棧的還原
下拉加載
這個(gè)問題多見于消息記錄等查詢，在小程序中也會(huì)這遇到這樣的問題
問題描述
絕大多數(shù)滾動(dòng)場景都是上拉加載，上拉加載的時(shí)候，加載的內(nèi)容在滾動(dòng)區(qū)域的下方出現(xiàn)，加載之后，我們將數(shù)據(jù)添加到列表，由 Vue 等負(fù)責(zé)渲染新加載的內(nèi)容，我們繼續(xù)上拉就可以繼續(xù)滾動(dòng)查看。
但在我們的場景下，在某一會(huì)話中翻閱消息記錄的時(shí)候，是下拉加載更多消息，加載后，繼續(xù)下拉慢慢滾動(dòng)查看。這就導(dǎo)致了一個(gè)很嚴(yán)重的問題：下拉加載后出現(xiàn)的內(nèi)容在滾動(dòng)區(qū)域的上方，不做任何處理的話加載后會(huì)直接跳到新加載內(nèi)容的最上方，因?yàn)闈L動(dòng)距離沒變，這就出問題了，和我們想實(shí)現(xiàn)的不一致。
解決方案
也想了很多的方法，包括計(jì)算新增加消息的總長度，然后滾回來，但是消息的類型和高度不一致，計(jì)算會(huì)有誤差。
最終想到的處理辦法就是：
- 通過接口獲取到加載信息后首先標(biāo)記（使用 shouldScroll 標(biāo)記）后端返回的第一條信息，也就是加載后我們的視角要看到的新內(nèi)容
- messageList 更新后，Vue 會(huì)更新數(shù)據(jù)和視圖，這時(shí)候頁面 dom 被更新了
- MessageItem 組件 mounted 后，這時(shí)候已經(jīng)完成了視圖的渲染，通過檢查標(biāo)記（shouldScroll）,通知父容器滾動(dòng)到剛才標(biāo)記的位置，也就是加載的第一條信息處，這樣也就把渲染和滾動(dòng)做到一起了
以上兩個(gè)問題在下圖均有體現(xiàn)，效果還可以，如下：
以上內(nèi)容在我的即時(shí)通訊應(yīng)用客戶端中均有體現(xiàn)，歡迎查看源碼
總結(jié)
到此這篇關(guān)于Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法的文章就介紹到這了,更多相關(guān)Vue滾動(dòng)條和下拉加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07
Vite是一款非常輕量級(jí)的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個(gè)開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
Vue項(xiàng)目獲取url中的參數(shù)(親測可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了vue之封裝多個(gè)組件調(diào)用同一接口的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue-cli配置使用Vuex的相關(guān)資料,Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,本介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue 內(nèi)聯(lián)樣式style中的background用法說明
這篇文章主要介紹了vue 內(nèi)聯(lián)樣式style中的background用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟
這篇文章主要介紹了在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟，文中的代碼示例講解的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
基于element-ui表格的二次封裝實(shí)現(xiàn)
本文主要介紹了基于element-ui表格的二次封裝實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問題的解決
這篇文章主要介紹了vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04