微信小程序自定义tabBar

写法一：使用官方组件实现

• 第一步：设置app.json的tabBar项为custom:true,并开启usingComponents:{}
  

• 第二步：导入官方已经封装好的custom-tabbar组件

• 组件导入

• 第三步：在每一个tab页的js文件下的onShow函数中都引入以下代码，同时在.json文件中开启 “usingComponents”:{}
  
  

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

• 第四步：修改官方组件的js文件中的页面路径，如下：
  
  效果展示：