안녕하세요 여러분 csdn: lqj_self 블로거입니다.
이것은 내 개인 블로그 홈페이지입니다.
lqj_I_Python 인공지능 비전(opencv) 엔트리부터 실전, 프론트엔드, 위챗 애플릿까지 - CSDN Blog
최신 uniapp 졸업 디자인 칼럼도 아래에 있습니다.
https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
보통은 비리비리 영상에서 주로 사용하시는 몇가지 설명도 드리고,
Bilibili에 오신 것을 환영합니다:
스크롤 동작
vue-router경로가 전환될 때 페이지 스크롤 방법을 사용자 지정할 수 있습니다 . 예를 들어 새로운 경로로 점프하면 페이지가 특정 위치로 스크롤되고 경로를 전환하면 페이지가 이전 스크롤 위치로 돌아갑니다.
라우팅 인스턴스를 생성할 때 메서드만 제공하면 됩니다 scrollBehavior.
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
scrollBehavior함수는 개체를 수신 to하고 from라우팅합니다. 세 번째 매개변수 는 탐색(브라우저의 뒤로/앞으로 버튼 누르기 또는 메서드 호출) savedPosition인 경우 에만 popstate사용할 수 있습니다 .router.go()
고정된 거리로 스크롤
이 함수는 ScrollToOptions위치 개체를 반환할 수 있습니다.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始终滚动到顶部
return { top: 0 }
},
})
요소 위치로 스크롤
el를 통해 CSS 선택기 또는 DOM 요소를 전달할 수도 있습니다 . 이 경우 top및 left요소에 대한 상대적 오프셋으로 처리됩니다.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始终在元素 #main 上方滚动 10px
return {
// 也可以这么写
// el: document.getElementById('main'),
el: '#main',
top: -10,
}
},
})
앵커 위치로 스크롤
"앵커로 스크롤"을 시뮬레이트하는 것도 가능합니다.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
}
}
},
})
이전 위치로 스크롤
뒤로 savedPosition, 브라우저 后退/前进버튼을 누르거나 router.go()메서드를 호출하면 페이지가 이전 스크롤 위치로 돌아갑니다.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})
팁: 잘못된 값이 반환되거나 빈 개체가 반환되면 스크롤이 발생하지 않습니다. behavior: 'smooth'반환된 객체에 추가하여 스크롤을 더 부드럽게 만들 수도 있습니다 .
지연 스크롤
때때로 우리는 스크롤 동작을 즉시 수행하고 싶지 않습니다. 예를 들어 페이지에 전환 애니메이션이 있는 경우 전환이 끝난 후 스크롤을 수행하려고 합니다. 이를 위해 Promise를 반환할 수 있습니다.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ left: 0, top: 0 })
}, 500)
})
}
})