前言：小程序内置的tabBar组件跳转后，底部的tabBar还是一直存在的。有时候我们点击tabBar后是希望跳到一个完整的界面，而不是还带有tabBar的界面。这时候我们就得自定义tabBar了。

配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段。
  
• 所有 tab 页的 json 里需声明 usingComponents 项，或者全局引入（在微信开发工具创建页面时，json文件中会自动生成，不用担心这个配置的问题）

添加 tabBar 代码文件

• 在文件的根目录下添加
  

这里的文件夹名称必须是custom-tab-bar，组件名称必须为index

编写tabBar(这里用自定义组件的方式编写就可以)

• wxml,wxss都是直接复制官方文档的实例代码。有需要的可以直接去下就可以了
  https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
  

这里需要修改的地方是在wxml文件中绑定data-subpage。

• index.js

  Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [
      {
        "pagePath": "/pages/index/Index",
        "iconPath": "/images/u101.png",
        "selectedIconPath": "/images/u101_selected.png",
        "text": "首页"
      },
      {
        "subpage":"true",
        "pagePath": "/pages/shop/Shop",
        "iconPath": "/images/shop_cart.png",
        "selectedIconPath": "/images/shop_cart.png",
        "text": "购物车"
      },
      {
        "pagePath": "/pages/mine/Mine",
        "iconPath": "/images/u98.png",
        "selectedIconPath": "/images/u98_selected.png",
        "text": "我的"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      if(data.subpage){
        wx.navigateTo({url:url,
          complete:function(res){
            console.log(res)
          },  })
      }else{
        console.log(e)
        wx.switchTab({url})
      }
      this.setData({
        selected: data.index
      })
    }
  }
})

说白了就是在data中添加一个属性subpage（自定义的）来控制自定义tabBar组件列表的元素的跳转方式的。

通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

• 在每一个tab页面的周期函数onShow里添加如下代码（注意：每个tab页面的selected值不同，对应“custom-tab-bar”中data的list数组中的下标）

   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
  }

注意：app.json文件中不能配置用wx.navigateTo()跳转的页面。

预览