vue3怎么利用store實(shí)現(xiàn)記錄滾動位置

小編給大家分享一下vue3怎么利用store實(shí)現(xiàn)記錄滾動位置，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

整體效果

在首頁列表進(jìn)行滾動瀏覽時(shí)進(jìn)入詳情頁后，切換回首頁時(shí)可以定位到之前瀏覽的位置。

監(jiān)聽容器滾動事件

定義一個(gè)滾動事件，綁定到容器的滾動事件上,我這里做了一下節(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中獲取到容器進(jìn)行綁定事件

onMounted(() => {
    let contentWrapper = document.querySelector(".contentWrapper");
    contentWrapper.addEventListener("scroll",savePosY);
})

store中的配置

store中比較簡單，僅包含一個(gè)state：y 以及 mutations：setY

export default {
    state:{
         y:0
    },
    mutations:{
        setY(state,value){
            state.y = value;
        }
    }
}

在頁面跳回時(shí)獲取滾動位置

同樣在onMounted中操作，否則獲取不到容器元素,而且由于vue中dom是異步渲染，所以我們需要在nextTick中操作才有效果

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

以上是“vue3怎么利用store實(shí)現(xiàn)記錄滾動位置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！