vue中記錄頁面的滾動距離

2022-03-21 21:18:16 字數 654 閱讀 4375

業務需求:pageone頁面是乙個商品列表頁面,在這個頁面點選商品,就會跳轉到pagetwo商品詳細頁面。此時再從pagetwo頁面返回到pageone頁面時,pageone頁面需要做到:1.記錄pageone之前的滾動的距離。2.不重新請求資料。而從其它頁面進入到pageone頁面時,pageone頁面不需要記錄之前的滾動距離和需要重新請求資料。

1.使用keep-alive元件的實現方法

page-one |

page-two

page-one.vue

測試

2.不使用keep-alive元件的實現方法page-one |

page-two

page-one.vue

測試

效果展示:

使用keep-alive快取元件只是為了儲存page-one元件中的scroll屬性,若不想快取元件,可以有很多鐘方法來記錄scroll,例如上面使用的路由元資訊meta、vuex、cookie、sessionstorage、localstorage等都能實現同樣的效果。

vue中監聽頁面滾動和監聽某元素滾動

在生命週期 mounted 中進行監聽滾動 mounted 在方法中定義監聽滾動執行的方法 scrolltotop 注意 需要監聽的這個元素需要擁有固定的高度 在vue元件中 content scroll scrollevent div 在方法中定義scrolldiv,是監聽class為conten...

vue中監聽頁面滾動和監聽某元素滾動

監聽頁面滾動 在生命週期mounted中進行監聽滾動 mounted 在方法中定義監聽滾動執行的方法 scrolltotop 記得在離開當前路由解綁scroll事件 beforeroutele e to,form,next 監聽某元素滾動 需要監聽的這個元素需要擁有固定的高度 vue元件中 在方法中...

Vue 在頁面中呼叫其他頁面的方法

感覺這篇文章寫的很清楚簡單,分享一下!且這個方法很適合一些沒有直接關係的頁面之間的函式呼叫 需要在展示頁裡呼叫頂部導航欄頁裡的方法,兩者之間沒有引用關係,看了一下vue的api發現可以用這個方法實現。可以看到需要同乙個vue例項來呼叫兩個方法。所以可以建立乙個中轉站。首先在任意位置新建util.js...