微信小程序-自定义tabBar

通过官网给出的示例自己实现了自定义的tabBar，但结果发现

无法监听页面生命周期函数

结语：原想的是实现不一样的效果（如下）

故尝试了自定义tabBar，虽然做出来了，但也发现这个做法存在不足：

在页面js文件中，需要给出以下代码：

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0		// 对应tabBar的下标
        })
      }
    }
  },
  data: {
    navBarHeight: getApp().globalData.navBarHeight,
  },
})

相当于将原来的page页面更改为组件components

这样做的结果就是无法监听页面生命周期函数（至少在创建page时自带的生命周期函数均无法监听）

这是我遇到的，若有解决方案，欢迎留言告知

实现步骤

官方文档：基础能力 / 自定义 tabBar (qq.