vue는 페이지의 상단 효과에 스크롤을 추가합니다.

이번에는 Vue에서 페이지 상단 효과에 스크롤을 추가하는 방법을 알려드리겠습니다. Vue가 페이지 상단 효과에 스크롤을 추가할 때 주의 사항은 무엇입니까? 보세요.

민트 UI를 사용하여 '목록보기'에서 상세페이지로 이동하는 모바일 단말기를 작성할 때, '목록보기'를 클릭하여 목록을 스크롤할 때 상세페이지가 휴대폰 높이보다 크기 때문에 스크롤이 가능합니다. 상세페이지에 들어가시면, 상단에서 상세페이지가 표시되지 않는 것으로 확인됩니다.

1. 목표:

'listview'를 통해 세부정보 페이지에 진입하면 페이지 상단부터 세부정보 페이지가 표시됩니다.

둘째, 다음 두 페이지의 스크롤Y를 먼저 확인해 보겠습니다. 매번 다르며 목록 보기와 세부정보 페이지 사이의 스크롤Y 사이에 패턴이 없습니다

3. 해결 방법: 세부정보 페이지 진입 시 상단 스크롤 페이지 위치 수정

4. 코드 구현: vue는 업데이트된라이프 사이클inside

updated() { 
    window.scroll(0, 0); 
  }

에 대해 다음과 같이 작성됩니다. 5. 문제는 해결되었지만 네트워크가 느린 경우 페이지 하단에서 상단으로 스크롤하는 과정이 그다지 아름답지 않다는 것을 분명히 알 수 있습니다.

네트워크가 데이터를 로드할 때 마스크 및 로드를 추가했습니다. 6. 로그인 페이지에서 메인 페이지로 진입하기 위한 Vue 인터셉터 작성 방법을 공유합니다

(1) login.vue 로그인 성공 시 sessionStorage

sessionStorage.setItem('isLogin', true)

입금 (2) Router의 index.js에

router.beforeEach((to, from, next) => {//  '/'是登陆页面的路由
 if (to.path == '/') {
  sessionStorage.removeItem('isLogin');
 }
 let user = JSON.parse(sessionStorage.getItem('isLogin'));
 if (!user && to.path != '/') {
  next({ path: '/' })
 } else {
  next()
 }
})

를 작성합니다. 이제 인터셉터가 완성되었습니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 프로젝트에서 sass 구성을 사용하는 방법

IView에서 on-change 속성을 사용하는 방법

위 내용은 vue는 페이지의 상단 효과에 스크롤을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!