vue 페이지는 스크롤 페이지로 전환되어 최상위 example_vue.js를 표시합니다.

아래에서는 vue 페이지를 스크롤 페이지 표시 상단으로 전환하는 예를 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

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

1. 목표 :

'listview' 상세페이지에 진입하시면 페이지 상단부터 상세페이지가 노출됩니다.

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

세 가지 솔루션: 상세페이지 진입 시 스크롤되는 페이지 위치가 상단으로 고정됩니다.

4. 코드 구현: vue 업데이트된 라이프사이클은 다음과 같이 작성됩니다.

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

5. 문제는 해결되었으나 네트워크 속도가 느린 경우 페이지 하단에서 상단으로 스크롤하는 과정이 그다지 아름답지 않다는 것을 확실히 알 수 있습니다. 이 문제에는 마스크를 추가할 수 있습니다.

6. 로그인 페이지에서 메인 페이지로 진입하기 위한 Vue용 인터셉터 작성 방법을 공유합니다

(1) 로그인 시 sessionStorage에 저장합니다. .vue 로그인이 성공했습니다

sessionStorage.setItem('isLogin', true)

(2) 라우터에서 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()
 }
})

을 작성하여 인터셉터를 완성하세요!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue 페이지 DOM 작업이 적용되지 않는 문제 해결

nodejs는 매우 간단한 QR 코드 생성 방법을 구현합니다.

nodejs+mongodb 집계 계단식 쿼리 작업 예제

위 내용은 vue 페이지는 스크롤 페이지로 전환되어 최상위 example_vue.js를 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!