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