How to close the current page in uniapp? Introduction to common methods

When using uniapp to develop mobile applications, you often encounter the need to close the current page. This article will introduce several common methods of closing the current page.

Method 1: Use uni.navigateBack

uni.navigateBack is an API provided by uniapp, which can be used to return to the previous page. If the current page does not have a previous page, return to the home page. You can specify the number of layers to return by passing in the delta parameter. The default value is 1, which means returning to the previous page.

Close the current page by calling the uni.navigateBack method. The code is as follows:

uni.navigateBack({
  delta: 1,
  animationType: 'pop-out',
  animationDuration: 200
});

This way, you can call this method to close the current page when the event is triggered.

Method 2: Use uni.navigateBackTo

uni.navigateBackTo is another API provided by uniapp, which can be used to return to the specified page. We can use the uni.redirectTo method to jump to the interface where the page needs to be closed, and then call the uni.navigateBackTo method in the interface where the page needs to be closed to return to the page before the jump.

//在A页面跳转到B页面
uni.redirectTo({
  url: '/pages/B/B'
})

//在B页面返回A页面
uni.navigateBackTo({
  url: '/pages/A/A',
  animationType: 'pop-out',
  animationDuration: 200
})

This way you can close the current page by jumping to the page and then returning.

Method 3: Use uni.reLaunch

If we want to jump to the home page or other pages after closing the current page, we can use the uni.reLaunch method. This method will close all open pages and then jump to the specified page.

uni.reLaunch({
  url: '/pages/index/index',
  animationType: 'pop-out',
  animationDuration: 200
})

This way you can jump to other pages after closing the current page.

Method 4: Use uni.navigateBack $once

The uni.navigateBack method will only return to the previous page. If you need to close more pages, you can call this method multiple times. to fulfill. Using $once, you can register an event listener that will only be called once when the page is loaded. When the page is closed, the event can be triggered to call the uni.navigateBack method.

Register a close event listener through $once when the page is loaded. The code is as follows:

onLoad() {
    this.$once('close', () => {
      uni.navigateBack({
        delta: 1,
        animationType: 'pop-out',
        animationDuration: 200
      });
    });
  }

Then when you need to close the page, you can close the page by triggering the event. The code is as follows: :

this.$emit('close');

This way you can close more pages by calling the uni.navigateBack method multiple times.

Summary:

This article introduces four common methods of closing the current page, namely using uni.navigateBack, uni.navigateBackTo, uni.reLaunch and uni.navigateBack $once. In specific development, you can choose which method to use based on actual needs. By mastering these methods, we can develop uniapp more conveniently.

The above is the detailed content of How to close the current page in uniapp? Introduction to common methods. For more information, please follow other related articles on the PHP Chinese website!