資訊專欄INFORMATION COLUMN
摘要：注意這個功能只在支持的瀏覽器中可用。官方文檔簡介滾動行為使用方法期望滾動到哪個的位置或者集成模式寫法期望滾動到哪個的位置方法接收和路由對象。
前提：之前寫過關(guān)于keep-Alive組件，來實現(xiàn)在列表頁進入詳情頁后，后退，返回列表，顯示上次訪問的位置（原理就是緩存列表頁數(shù)據(jù)來實現(xiàn)），目前發(fā)現(xiàn)另外一個問題，就是如果后臺操作改變數(shù)據(jù)的狀態(tài)，緩存的辦法就會導(dǎo)致數(shù)據(jù)更新不及時導(dǎo)致一些頁面錯誤（例如：商品疑問，在后臺答復(fù)之后，不可以修改內(nèi)容，前臺更新不及時就會導(dǎo)致，前臺顯示可編輯，但實際狀態(tài)是不可編輯了），所以又繼續(xù)研究另外一種解決辦法，scrollBehavior 來實現(xiàn)。
簡介：使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。
官方文檔簡介：滾動行為
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
})
或者集成模式寫法：
utils.js
export function scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
index.js
import Vue from "vue"
import Router from "vue-router"
import { scrollBehavior } from "./utils"
Vue.use(Router)
const router = new Router({
mode: "history",
scrollBehavior,
routes: [
...routesPC,
...routesMO
]
})
export default router
scrollBehavior 方法接收 to 和 from 路由對象。第三個參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進/后退 按鈕觸發(fā)) 時才可用。
在該方法內(nèi)，可以通過判斷路由to,from兩個對象來做一些必要的判斷；
savedPosition 參數(shù)是記錄的上次滾動的位置；
通過return {x:number,y:number}來控制頁面滾動的位置；
對于所有路由導(dǎo)航，簡單地讓頁面滾動到頂部。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
想要在后退時，滾動到上次滾動的位置，如果滿足條件，savedPosition有值的情況下：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
新增情況：異步滾動
當(dāng)頁面數(shù)據(jù)需要請求加載有延遲的情況下，頁面如果直接滾動，會出現(xiàn)滾動后，頁面數(shù)據(jù)請求回來，DOM重新渲染，滾動失效的情況；
所以官方文檔給補充了異步滾動的方法：
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
這個會在返回后，有一定延遲再滾動，可以根據(jù)自己項目的具體情況進行一定修改，兼容；
注：我的項目mobile端數(shù)據(jù)加載使用的是vue-mugen-scroll滑動加載數(shù)據(jù)組件，網(wǎng)上沒找到能觸發(fā)它加載的方法，所以，在返回列表頁后，數(shù)據(jù)刷新，只有一頁數(shù)據(jù)，滾動到底，也找不到上次的數(shù)據(jù)，嗚嗚嗚......所以還是沒有解決我的問題，但是這個方法是很好的，只是使用情況，會有限制，記錄一下，以備后用。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109862.html
摘要：滾動行為使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。注意，這個功能只能在模式下啟用滾動的位置方法接收和路由對象。 滾動行為 使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。 注意，這個功能只能在hist...
摘要：滾動行為使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。這個方法返回滾動位置的對象信息，長這樣如果返回一個布爾假的值，或者是一個空對象，那么不會發(fā)生滾動。 滾動行為 使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面...
摘要：前言本篇是我在使用過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。小結(jié)上面就是我分享的幾個小問題，希望大家看了能夠有所收獲另明年準(zhǔn)備去上海，如果小伙伴的公司有坑，可以聯(lián)系一下我。 前言 本篇是我在使用vue過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。如果喜歡的話可以點波贊，或者關(guān)注一下，希望本文可以幫到大家。 本文首發(fā)于我的個...
閱讀 3278·2021-10-11 10:59
閱讀 2843·2021-10-11 10:58
閱讀 2253·2021-09-04 16:45
閱讀 2731·2019-08-30 15:44
閱讀 684·2019-08-30 15:44
閱讀 3209·2019-08-30 10:51
閱讀 1603·2019-08-29 18:46
閱讀 2762·2019-08-29 13:57
