Requirements:

Click “Launch Contest” in the TabBar to jump to an empty page. According to the user’s status, the page will be routed to different pages. The problem is when returning. You need to return to the TabBar page before the user clicked to launch the contest.

Question:

First, the interface before the user clicks to launch the contest cannot be obtained

  • Reason: When you switch between TabBar pages, the old TanBar page will be pushed and the new TabBar page will be pushed. So the last TabBar page cannot be retrieved.
  • Verification: Pass the interface of FillMatchInfo of the two TabBar pages, Index on the home page, createMatch to launch the match, and FillMatchInfo to fill the match according to the state jump respectively getCurrentPages Prints the current page stack.
  1. First start the small program, home page printing:
  2. Click on Create Match to print in the CreateMatch empty page: Found the page stack now has only one CreateMatch page
  3. Based on the user status, now jump to the FillMatchInfo interface to fill in the match information. There are now two pages in the page stack.
  • Solution: Define your own page stack in the model. You can retrieve the TabBar page before the user clicked to launch the contest. Then on return, the route hop is performed according to the URL of the custom page stack. Then the new question arises, how to control the return to the specified page?

How to return to the specified page to enter the CreateMatch page, according to the user status, jump to the corresponding page, here is using Navigateto

Taro.navigateTo({ url: '.. /fillMatchInfo/fillMatchInfo' })

NavigateTo: Save the current page and jump to a page in the app. But you cannot jump to the tabbar page. Use Taro. NavigateBack to return to the original page. The page stack in a small program is up to ten levels.

NavigateBack: Close the current page and return to the previous page or multi-level page. You can use GetCurrentPages to get the current stack of pages and determine how many layers to return.

But there is no page in the stack that you want to jump to, so you can’t use the NavigateBack method.

Solution: The Navigateto app comes with its own return key. Small program with the back key does not support custom path. One solution is to listen to the page unload in the lifecycle function and then route the jump.

  1. The problem with SwitchTab is that it does return to the home page, but then it immediately returns to the race information page. When I returned to the home page, the printed page stack in onShow only had the home page, but I immediately jumped to the page of filling in competition information. In onShow on this page, the printed page stack had the home page and competition information.
  2. Relaunch will close all of the current stack of pages. This works, but there is a lag because all the pages on the stack are closed.

Final outcome method

  • Customize a TabBar page stack in the global model. The TabBar pagecomponentDidHideWhen the page information into the stack (because the page into the background must have page switch)
  • Is the lifecycle function of the page to jump tocomponentWillUnmountListen for page uninstall in, and then route jump. (URL from the top element of the custom page stack)