How to close the middle pages in uniapp development

During the uniapp development process, we often need to close the page. But how to close only the middle pages when closing the page? This article will introduce how to implement this function in uniapp development.

Step one: Understand the page stack

In uniapp, we can use uni.navigateTo and uni.redirectTo to jump to the page, and we can also use uni.navigateBack to return to the previous page. In the process of jumping and returning to pages, the page stack plays an important role.

The page stack is an array that stores all the pages in the current page stack. Through the page stack, we can jump between pages, pass parameters, and close the page.

By default, the page stack starts from the home page (i.e. app.vue), and the top page is placed at the end of the page stack.

For example, we jump to page A through uni.navigateTo, and then jump to page B through uni.navigateTo in page A. At this time, the structure of the page stack is as follows:

[ home, A, B ]

Among them, home is the home page, and the top page is B. In page B, if we want to return to page A, we can do so through the uni.navigateBack() function.

If we want to close page B while returning to page A, how to achieve it? This requires us to operate the page stack.

Step 2: Manipulate the page stack

We can close all pages through uni.reLaunch and reopen the target page in an open page. But that's not what we need since we only want to close the middle page.

In uniapp, you can get the current page stack through the uni.getCurrentPages() method. This method returns an array that stores all pages in the current page stack. We can operate on the page stack through this array.

First of all, we can get the status of the current page stack through getCurrentPages():

let pages = getCurrentPages()

At this time, the pages array saves all the pages in the page stack. If we want to close the current page and the previous page in the page stack, we can do it like this:

let pages = getCurrentPages()
let currentPage = pages[pages.length - 1]
let prePage = pages[pages.length - 2]
currentPage.$destroy()
uni.navigateBack({
  delta: 1,
  success: function () {
    prePage.setData({
      foo: 'bar'
    })
  }
})

In this code, we first get the status of the current page stack. Then, the instances of the current page and the previous page are obtained through currentPage and prePage respectively. Then, the instance object of the current page can be destroyed through the $destroy() method.

Finally, use the uni.navigateBack() method to return to the previous page and modify the data on the previous page.

If you want to close multiple pages, you can close the pages one by one by looping through them. For example, if you want to close the current page, the previous page and the previous page, you can do it like this:

let pages = getCurrentPages()
for (let i = 0; i < 3; i++) {
  let currentPage = pages[pages.length - 1 - i]
  currentPage.$destroy()
}
uni.navigateBack({
  delta: 2,
  success: function () {
    // do something
  }
})

In this way, you can realize the function of closing only the middle pages.

Summary

In uniapp development, the page stack is a very important concept. By understanding the page stack, we can realize functions such as jumping between pages, passing parameters, and closing pages.

To close the middle pages, you can use the getCurrentPages() method to obtain the status of the current page stack, close the pages one by one through loop traversal, and finally use the uni.navigateBack() method to return to the previous page. .

Hope this article can be helpful to you!

The above is the detailed content of How to close the middle pages in uniapp development. For more information, please follow other related articles on the PHP Chinese website!