vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例
在首頁(yè)列表進(jìn)行滾動(dòng)瀏覽時(shí)進(jìn)入詳情頁(yè)后,切換回首頁(yè)時(shí)可以定位到之前瀏覽的位置。
定義一個(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;} }}在頁(yè)面跳回時(shí)獲取滾動(dòng)位置
同樣在onMounted中操作,否則獲取不到容器元素,而且由于vue中dom是異步渲染,所以我們需要在nextTick中操作才有效果
nextTick(() => { contentWrapper.scrollTop = store.state.y; })
最后以上就是本文的全部?jī)?nèi)容啦,如果有寫(xiě)的不對(duì)或者有更好的方法,歡迎大家交流指出
以上就是vue3利用store實(shí)現(xiàn)記錄滾動(dòng)位置的示例的詳細(xì)內(nèi)容,更多關(guān)于vue 實(shí)現(xiàn)記錄滾動(dòng)位置的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程2. jsp實(shí)現(xiàn)登錄驗(yàn)證的過(guò)濾器3. 如何在jsp界面中插入圖片4. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享5. 詳解瀏覽器的緩存機(jī)制6. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法7. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理8. phpstudy apache開(kāi)啟ssi使用詳解9. jsp文件下載功能實(shí)現(xiàn)代碼10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
