Vue 滾動行為

snifes 發布于2019-08-22 11:05 / 2249人閱讀

摘要：滾動行為使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。期望滾動到哪個的位置返回滾動位置的對象信息如果返回一個布爾假的值，或者是一個空對象，那么不會發生滾動。

滾動行為

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

注意: 這個功能只在 HTML5 history 模式下可用。

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的前進/后退按鈕觸發) 時才可用。

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
  // return 期望滾動到哪個的位置
}
})

返回滾動位置的對象信息

{ x: number, y: number }
{ selector: string }

如果返回一個布爾假的值，或者是一個空對象，那么不會發生滾動。


    滾動行為
    
        首頁
        導航
        關于
        紅色頁面
        藍色頁面

地址：https://github.com/haxxk/xu_s...

云服務器 GPU云服務器行為分離行為禁令行為擴展奇葩行為

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91757.html

Vue scrollBehavior 滾動行為，實現后退頁面顯示在上次瀏覽的位置

摘要：注意這個功能只在支持的瀏覽器中可用。官方文檔簡介滾動行為使用方法期望滾動到哪個的位置或者集成模式寫法期望滾動到哪個的位置方法接收和路由對象。前提：之前寫過關于keep-Alive組件，來實現在列表頁進入詳情頁后，后退，返回列表，顯示上次訪問的位置（原理就是緩存列表頁數據來實現），目前發現另外一個問題，就是如果后臺操作改變數據的狀態，緩存的辦法就會導致數據更新不及時導致一些頁面錯誤（例...

BaronZhang 2019-08-26 13:56 評論0 收藏0
Vue-router的滾動行為

摘要：滾動行為使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。注意，這個功能只能在模式下啟用滾動的位置方法接收和路由對象。滾動行為使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。注意，這個功能只能在hist...

biaoxiaoduan 2019-08-22 11:05 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評論0 收藏0