Vue adds a scroll to the top effect in the page

This time I will bring you how to add a scroll to the top effect in vue on the page. What are the precautions for adding a scroll to the top effect in vue on the page? The following is a practical case, let’s take a look. take a look.

When using mint ui to write the mobile terminal to jump from 'listview' to the details page, the details page can be scrolled because it is larger than the height of the mobile phone. When clicking 'listview' to scroll the list and enter the details page, it is found that the details page is not from the top. Start showing.

1. Goal:

When 'listview' enters the details page, the details page is displayed from the top of the page.

2. Let me first check the scrollY of the next two pages. It is different every time, and there is no pattern between the scrollY between the listview and the details page

3. Solution: Fix the position of the scroll page at the top when entering the details page

4. Code implementation: The writing method in vue is as follows, as for updatedlife cycleinside

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

5. The problem has been solved, but when the network is slow, you can clearly see that the process of scrolling from the bottom to the top of the page is not very beautiful. This problem can be solved by yourself when the network loads data. For masking and loading, I added

6. I am sharing how to write an interceptor for Vue to enter the main page from the login page

(1) Save sessionStorage

sessionStorage.setItem('isLogin', true)

when the login.vue login is successful.

(2) Write

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()
 }
})

in Router’s index.js The interceptor is now complete!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use sass configuration in vue project

How to use the on-change attribute in IView

The above is the detailed content of Vue adds a scroll to the top effect in the page. For more information, please follow other related articles on the PHP Chinese website!