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)文章
Vue3.0使用ref和reactive來創(chuàng)建響應(yīng)式數(shù)據(jù)
ref?和?reactive?是?Composition?API?中用來創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在本篇文章中,我們將詳細(xì)講解如何使用?ref?和?reactive?來創(chuàng)建響應(yīng)式數(shù)據(jù),并展示它們之間的區(qū)別和使用場景,需要的朋友可以參考下2024-11-11
defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue?狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案(最新推薦)
文章介紹了在使用Pinia定義的useHeaderTabStore中,tab狀態(tài)通過會(huì)話存儲(chǔ)初始化但未在退出登錄時(shí)同步清空的問題,通過在PiniaStore中定義清空tab的函數(shù),并在退出登錄時(shí)調(diào)用該函數(shù),可以確保狀態(tài)和會(huì)話存儲(chǔ)同步清空,避免內(nèi)存中殘留舊數(shù)據(jù),感興趣的朋友一起看看吧2024-12-12
vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件實(shí)例代碼
最近學(xué)習(xí)了Vue.js，感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以決定記錄下，下面這篇文章主要給大家介紹了關(guān)于利用vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
vue中提供了一種混合機(jī)制--mixins，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。下面給大家談?wù)勎覍ue中mixin的一點(diǎn)理解，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了uni-app在線預(yù)覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項(xiàng)目中使用PDF.js插件進(jìn)行PDF文件的預(yù)覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下2024-10-10
基于Vue?+?ElementUI實(shí)現(xiàn)可編輯表格及校驗(yàn)
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實(shí)現(xiàn)可編輯表格及校驗(yàn),文中有詳細(xì)的代碼講解和實(shí)現(xiàn)思路,講解的非常詳細(xì),有需要的朋友可以參考下2023-08-08
vue 對象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法
這篇文章主要介紹了vue 對象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例
本篇文章主要介紹了VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06