vue3利用store實現(xiàn)記錄滾動位置的示例
更新時間：2021年04月09日 11:12:10 作者：hq4952
這篇文章主要介紹了vue3利用store實現(xiàn)記錄滾動位置的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
整體效果
在首頁列表進行滾動瀏覽時進入詳情頁后，切換回首頁時可以定位到之前瀏覽的位置。
監(jiān)聽容器滾動事件
定義一個滾動事件，綁定到容器的滾動事件上,我這里做了一下節(jié)流
const savePosY = () => {
if(state.timer) return;
state.timer = setTimeout(() => {
let node = document.querySelector(".contentWrapper")；
//記錄滾動位置
store.commit("setY",node.scrollTop)
state.timer = null;
clearTimeout(state.timer);
},100)
在mounted中獲取到容器進行綁定事件
onMounted(() => {
let contentWrapper = document.querySelector(".contentWrapper");
contentWrapper.addEventListener("scroll",savePosY);
})
store中的配置
store中比較簡單，僅包含一個state：y 以及 mutations：setY
export default {
state:{
y:0
},
mutations:{
setY(state,value){
state.y = value;
}
}
}
在頁面跳回時獲取滾動位置
同樣在onMounted中操作，否則獲取不到容器元素,而且由于vue中dom是異步渲染，所以我們需要在nextTick中操作才有效果
nextTick(() => { contentWrapper.scrollTop = store.state.y; })
最后
以上就是本文的全部內(nèi)容啦，如果有寫的不對或者有更好的方法，歡迎大家交流指出
以上就是vue3利用store實現(xiàn)記錄滾動位置的示例的詳細內(nèi)容，更多關(guān)于vue 實現(xiàn)記錄滾動位置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vant是一個強大的移動端組件庫,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對大家有所幫助2023-10-10
本文主要介紹了vue項目中使用html2canvas解決截圖不全的問題2023-11-11
今天小編就為大家分享一篇解決Vue打包上線之后部分CSS不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue 之孫組件向爺組件通信的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
VScode中配置ESlint+Prettier詳細步驟(附圖文介紹)
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細步驟,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-12-12
Vue中div contenteditable 的光標定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
學過?vue2?的寶子們應該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高。本文就來為大家介紹一下Vue3中計算屬性的用法，需要的可以參考一下2022-07-07
這篇文章主要介紹了解決elementui表格操作列自適應列寬，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12