How to return to close window in uniapp

UniApp is a multi-terminal application framework developed based on Vue.js. By using UniApp we can easily develop applications that support multiple platforms (cross-terminal). When developing UniApp applications, we often encounter situations where we need to open a new page within a page and return to the original page after completing some operations. This article will introduce how to implement page return and close operations in UniApp.

UniApp implements the return operation:

1. Implemented through the uni.navigateBack() method

Use the uni.navigateBack() method to return to the previous page on the current page operation. This method is a built-in API provided by uni-app, which is used to implement page jump and return operations. The following code can be added to the methods of the Vue page:

backPage:function(){
    uni.navigateBack({
        delta: 1
    });
}

This method sets a delta parameter, indicating the number of pages to be returned. The default value is 1, which means returning to the previous page. If you want to return to the previous page of the specified page, you need to set the value according to the specific situation.

2. Implementation through route jump parameters

Using the $router.go(-1) or $router.back() method in the Vue page can realize the return operation of the page. Both methods return the previous route to the current route. In UniApp, we can call it in the following ways:

backPage:function(){
    this.$router.go(-1);
    或者
    this.$router.back();
}

UniApp implements the window closing operation:

1. Through the uni.navigateBack() method

We can implement it through The uni.navigateBack() method sets the delta value to the number of all open window pages to implement the operation of closing the window. This method will return the specified number of pages, and all previous pages will be closed. We can achieve this in the following way:

closePage:function(){
    uni.navigateBack({
        delta: getCurrentPages().length
    });
}

The getCurrentPages() method is used here to obtain the number of opened pages and use it as the value of delta to close all previously opened pages.

2. Implemented through the uni.switchTab() method

If we use the tabbar function in the application, we can close all non-tabbar pages through the uni.switchTab() method. This method will switch to a tabbar page and close all open non-tabbar pages. Normally, we can use this method to close all non-essential pages when performing some important operations. The implementation method is as follows:

closeOtherPage:function(){
    uni.switchTab({
        url: '/pages/tabbar/tabbarIndex/tabbarIndex',
        complete:function(){
            uni.navigateTo({
                url:'/pages/tabbar/tabbarPage/tabbarPage'
            })
        }
    })
}

The above is the method to implement page return and close operations in UniApp. During the development process, choosing the appropriate method to implement the return and closing operations of the page according to the specific scenarios of the application can not only improve the user experience of the application, but also provide more complete functions for the users of the application.

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