【小程序】自定义tabbar状态失效踩坑记录

背景

• 博主由于比较懒，所以就去找第三方组件弄tabbar，但是小程序tabbar做出来效果有点问题。

坑位效果

• 博主使用第三方组件库叫wux-weapp，虽然这个tabbar确实跟原装差不多，但主要还是为了试验能不能订制第三方效果。
• 微信开发者手册上提供了在tabbar配置custom:true，然后去建个文件夹叫custom-tab-bar，里面把第三方tabbar做成组件，即可使用。但是使用出的效果有问题，点击切换路由后，选中颜色不会跳到指定tab颜色，而会跳回上一个点击tab的效果。但是如果不在组件上绑定点击事件后，点击效果完全正常。其中这个第三方tabbar没用默认的选中图标图片地址和不选中图标地址。
• 网上还有个解决方案我也试验了下，就是配置正常的tabbar然后onload时候调用wx.hidetabbar,也是通过组件引用，每一页需要加上自定义组件标签，切换tab一样用wx.switchtab来解决，但是效果跟上面一样，仍然不行。
• 博主后来感觉可能是执行过程有问题，不断的调试data中当前页面以及想到用wx.switchtab里调用success后来解决跳转路由后切换选中icon状态问题。但是依然无效。

解决方法

• 博主搞了一天后发现原来是这么回事，不能在组件页面写生命周期，目标页面加这段，但是会取代目标页面Page（），正常的组件是在自己组件写pagelifetimes并且会被调用，但是自定义tabbar就必须目标页面用component了，官方例子也是这样的。

Component({
  //页面将tabBar中的selected记录值更改，达到tabBar页面跳转图标更换
  pageLifetimes: {
    show() {
      this.getTabBar().setData({
        selected: 1
      });
    }
  }
})