Custom navigation bar returns to previous page and bottom Tabbar follows transform

Recently do small procedures encountered two problems:

1. Customize the back button of the navigation bar:

2. How to follow the back button of the custom navigation bar to follow the current selection effect when using the tabbar of WEUI;

Problem one solution:

NavigateBack :wx.navigateBack Check the official documentation to see:

Using this API, you can go straight back to the previous page.

To return to the previous page, simply implement a button and bind wx.navigateBack to the bindTap event. The concrete implementation is as follows:

<icon bindtap="back" class="iconfont icon-shangyiye" style="position:absolute; height:110rpx; bottom:1rpx; left:20rpx; font-size:60rpx;"></icon>
Copy the code

I used an Ali icon that can be modified by myself. Bound event functions:

back: function () {
        wx.navigateBack({
          delta: 1}}})Copy the code

At this point, the function of going back to the previous page is implemented.

Problem two solution:

How to solve the problem that tabbar does not follow jumps? My solution is as follows: since it is the component of the weUI that calls, we need to understand the principle of jump:

But when we click the icon to jump, we can jump only because we have bound an event handler to the BindChange event. Can we jump from here by calling the event handler in the back function? The answer is: yes. Check the official documents:

There is an interface to get the current page stack directly, and that’s what we want to returnPenultimate pageBecause the last last page is the current page.

We just need to decide if we need to change the tabbar when we click the back button. Not all pages need tabbar changes.

Since there are some common attributes, I put some tabbar property values in app.js, and according to my definition, I only need to set the following values:

These four pages are tabbar transformed, so when I determine in the back function that I need to return one of the above four pages, I call tabbar’s bindchange function as follows:

back: function () {
      let curr = getCurrentPages(); 
      const tarrBar = ['index'.'date'.'message'.'about'];
      let backPage = curr[curr.length - 2].route.split('/') [2];
      // Navigate to wx.navigateBack by clicking the lower navigation bar
      if (tarrBar.indexOf(backPage) >= 0) {
        let app = getApp();
        app.tabChange(tarrBar.indexOf(backPage));
      } else {
        wx.navigateBack({
          delta: 1.complete: (res) = > {
            letapp = getApp(); }}}})Copy the code

For the tabChange method, I need to determine whether the argument passed is a change event object or a number value:

tabChange:function(e) {
    let that = this;
    let urls = [
      '.. /index/index'.'.. /date/date'.'.. /message/message'.'.. /about/about'
    ]
    let index = 0;
    console.log(e);
    if (typeof e === 'number') {
      index = e;
    } else {
      index = e.detail.index; 
    }
    wx.navigateTo({
      url: urls[index],
      complete: res= >{}})}Copy the code

This will do the basic jump function.

This seems like a perfect solution, but there is actually a very serious problem, which I call the page stack loop problem.

For the native wx.navigate interface, the call removes the page between the current page and the return page from the stack, and then puts the return page at the top of the stack without deleting it when we jump directly to the page. Applets are not recommended to make their own changes to the page stack, so what to do? In fact, we only need to think of one question: Why doesn’t Tabbar jump?

According to the applet documentation, we setcurrentThis property determines the current subscript.

In the code, I set it like this:

According to the truth, each page bound to their own value, to their own page to refresh their own value, and I this value is written dead, should be based on the page to jump.

The truth is:

I’m using a component, and the value of the component’s property is global, meaning that IF I change the value of current on one page, it will affect all pages that use the component.

So:

I need to update the value of the current property after each page jump. At this point, we can use the life cycle function onShow:

thenbackFunctions andtabChangeThe function is restored to its original appearance:

back: function () {
      let curr = getCurrentPages();
      wx.navigateBack({
        delta: 1.complete: (res) = >{}})}Copy the code

tabChange:function(e) {
    let that = this;
    let urls = [
      '.. /index/index'.'.. /date/date'.'.. /message/message'.'.. /about/about'
    ]
    let index = e.detail.index;
      wx.navigateTo({
        url: urls[index],
        complete: res= >{}})}Copy the code

This is the perfect time to solve the problem.

---