自定义导航栏返回上一页和底部tabbar跟随变换

最近做小程序遇到了两个个问题:

1.自定义导航栏的返回按钮：

2.使用WEUI自带的tabbar时，如何跟随自定义导航栏的返回按钮进行当前选择效果的跟随变换；

问题一解决:

利用接口:wx.navigateBack 进行解决。
查看官方文档可以知道：

利用这个API可以直接返回到上一级页面。

那么要实现返回上一页的功能很简单，只需要自己实现一个按钮，并对bindTap事件绑定wx.navigateBack即可。

具体实现如下:

<icon bindtap="back" class="iconfont icon-shangyiye" style="position:absolute;height:110rpx;bottom:1rpx;left:20rpx;font-size:60rpx;"></icon>
复制代码

我使用了一个阿里的icon，可以自行修改.
绑定的事件函数:

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

复制代码

到此，就实现了返回上一页的功能。

问题二解决：

随之而来的tabbar不跟随跳转的问题，如何解决呢？
我的解决思路如下：
因为是调用的weui的组件，所以需要了解跳转的原理:

但点击图标发生跳转时，是因为我们在bindchange事件上绑定了一个事件处理函数，才能进行跳转。那么是否能从这里入手，在back函数中调用这个事件处理函数，达到跳转目的呢？
答案是：可以的。

查阅官方文档可知:

存在这样的接口，可以直接获得现在页面栈，我们想要返回的就是倒数第二个页面，因为倒数第一个页面就是当前的页面。

那么我们只需要在点击返回按钮的时候，判断此时是否需要进行tabbar的变化。因为不是所有的页面都需要进行tabbar的变化。
因为存在一些公用属性，所以我将tabbar的一些属性值写在了app.js中,而根据我的定义，我只需要对如下的:

这四个页面进行tabbar的变换，所以，当我在back函数中判断我需要返回的页面在上述四个页面之中时，就调用tabbar的bindchange函数即可，如下:

back: function () {
      let curr = getCurrentPages(); 
      const tarrBar = ['index', 'date', 'message', 'about'];
      let backPage = curr[curr.length - 2].route.split('/')[2];
      // 点击下方导航栏则直接跳转，否则利用wx.navigateBack进行跳转
      if (tarrBar.indexOf(backPage) >= 0) {
        let app = getApp();
        app.tabChange(tarrBar.indexOf(backPage));
      } else {
        wx.navigateBack({
          delta: 1,
          complete: (res) => {
            let app = getApp();
          }
        })
      }
    }
复制代码

而对于tabChange方法，我需要判断传入的参数是change事件对象还是一个number值:

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 => {
      }
    })
  }
复制代码

这样就能做到基本的跳转功能。

事情到这看似完美的解决了，但是实际上存在一个很严重的问题，我管这叫：页面栈的循环问题。

对于原生的wx.navigate接口，调用之后会将当前页到返回页面之间的页面从栈中移除，然后将返回页放到栈顶，而我们直接跳转页面时，并没有进行删除操作。
小程序官方也不建议自行对页面栈进行修改，那怎么办呢？
其实，我们只需要想到一个问题:为什么tabbar不会跳转？

根据小程序的文档，我们设定current这个属性就能够对当前的下标进行确定。
而在代码中，我是这样设定的：

按照道理，每个页面绑定自己的值，到了自己的页面就刷新自己的值了，而且我这个值是写死的，应该会根据页面进行跳转。

真相是:

我使用的是组件，组件的属性值是全局的，意思是，我在一个页面修改了current的值，这个值是会影响到所有使用这个组件的页面的。

所以：

我需要在每次页面跳转后对current属性的值做出更新。
此时，我们可以利用生命周期函数onShow:

再将back函数和tabChange函数恢复到最初的样子:

back: function () {
      let curr = getCurrentPages();
      wx.navigateBack({
        delta: 1,
        complete: (res) => {
        }
      })
    }
复制代码

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 => {
        }
      }) 
  }
复制代码