溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue3怎么利用store實現記錄滾動位置，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在首頁列表進行滾動瀏覽時進入詳情頁后，切換回首頁時可以定位到之前瀏覽的位置。
定義一個滾動事件，綁定到容器的滾動事件上,我這里做了一下節流
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中比較簡單，僅包含一個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; })
以上是“vue3怎么利用store實現記錄滾動位置”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
