滾動(dòng)行為

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供沙灣網(wǎng)站建設(shè)、沙灣做網(wǎng)站、沙灣網(wǎng)站設(shè)計(jì)、沙灣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、沙灣企業(yè)網(wǎng)站模板建站服務(wù)，10余年沙灣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

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

當(dāng)創(chuàng)建一個(gè) Router 實(shí)例，你可以提供一個(gè) scrollBehavior 方法：

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

scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長(zhǎng)這樣：

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

如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。

舉例：

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

對(duì)于所有路由導(dǎo)航，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部。

返回 savedPosition，在按下 后退/前進(jìn) 按鈕時(shí)，就會(huì)像瀏覽器的原生表現(xiàn)那樣：

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

如果你要模擬『滾動(dòng)到錨點(diǎn)』的行為：

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。